时间戳

首页 > 解决方案 > 滑动 ListView 将转到另一个 ListView

reactjs - 滑动 ListView 将转到另一个 ListView

问题描述

我有两个 JSON 文件。我希望如果用户在一个 listView 上滑动，该数据来自第一个 JSON 文件，他/她将被重定向到另一个 ListView，该数据来自第二个 JSON 文件。下面是我的名为 Car_Types 的 JSON 文件的结构

[
{
    "id":0,
     "Car_Type": "BMW"
},
 {
   "id":1,
   "Car_Type": "Mercedes Benz"
 },

 {
   "id":2,
    "Car_Type": "Fiat"
 },
 {
   "id":3,
   "Car_Type": "Volkswagon"
 },
   {
    "id":4,
   "Car_Type": "Honda"
 },
   {
   "id":5,
   "Car_Type": "Lexus"
 }
]

我的另一个 JSON 文件是这样的（CarDetails.json）

[
    {
       "id": 0,
        "FK" : 0,
        "carType": "2018 BMW X5",
        "Dealership Addr": "North Point"
   },

    {

      "id": 1,
      "FK" : 0,
       "carType": "2018 BMW X6",
    "Dealership Addr": "North Point2"
  },

  {
       "id": 2,
    "FK" : 0,
        "carType": "2019 BMW X3",
    "Dealership Addr": "North Point3"
  },

  {
       "id": 3,
       "FK" : 0,
       "carType": "2018 BMW X1",
      "Dealership Addr": "North Point4"
  },
  {
       "id": 1,
      "FK" : 1,
       "carType": "C-Class Sedan",
    "Dealership Addr": "Test Point4"
  },
  {
       "id": 1,
       "FK" : 1,
       "carType": "E-Class Sedan",
    "Dealership Addr": "Test Point1"
  },
  {
       "id": 5,
      "FK" : 1,
       "carType": "S-Class Sedan",
      "Dealership Addr": "Test Point2"
  },
  {
       "id": 6,
       "FK" : 1,
       "carType": "S-Class Maybach",
       "Dealership Addr": "Test Point56"
  },
   {
       "id": 7,
    "FK" : 2,
       "carType": "Fiat Multipla",
       "Dealership Addr": "Test Point66"
  },  
  {
       "id": 8,
      "PID" : 2,
       "carType": "Fiat 500",
    "Dealership Addr": "Test Point66"
  }
]

我的第一个 ListView 应该是这样的：

宝马

奔驰

菲亚特

大众汽车

本田

雷克萨斯

当有人在 BMW 上滑动时，我应该被重定向到另一个 listView，它应该显示在 ListView 下面

2018宝马X5北角

2018宝马X6北角2

2018 宝马 X3 北角 3

2018宝马X1北角4

它只会显示这四个项目，因为 BMW 的 id 在我的第一个 JSON 列表中为 0，而 fk(foreignKey) 在我的第二个 JSON 列表中为 0。换句话说，当 id=fk 时，它应该在我的第二个屏幕上显示 Listview。

这是我在代码中的内容。我的第一个屏幕代码有效，但是当我转到第二个屏幕时，我无法根据从第一个屏幕传递的 ID 过滤列表视图中的列表。另外，我无法读取从 firstscreen 传递的 id

import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView, ActivityIndicator, TextInput, TouchableOpacity } from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux'
import reducers from '../reducers/ServiceReducer';
import ServiceItem from './ServiceItem';
import Icon from 'react-native-vector-icons/EvilIcons';
import ServiceDetail from './ServiceDetail';
import TestActivity from './TestActivity';

import { StackNavigator } from 'react-navigation';
import ServiceListDetails from './ServiceListDetails' ;




class AutoCompActivity extends Component {

  constructor(props) {

    super(props);

    this.state = {

      // Default Value of this State.
      Loading_Activity_Indicator: true,
      text:'',
      selected_topic_id: -1,

    }
    this.arrayholder=[];
  }


  componentDidMount() {

    const data = require('../reducers/services.json')



        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.setState({
          Loading_Activity_Indicator: false,
          dataSource: ds.cloneWithRows(data),
        }, function() {

          // In this block you can do something with new state.
          this.arrayholder = data ;
        });


  }


  SearchFilterFunction(text){

    const newData = this.arrayholder.filter(function(item){
        const itemData = item.ser.toUpperCase()
        const textData = text.toUpperCase()
        return itemData.indexOf(textData) > -1
    })
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(newData),
        text: text
    })
}

ListViewItemSeparator = () => {
  return (
    <View
      style={{
        height: .5,
        width: "100%",
        backgroundColor: "#000",
      }}
    />
  );
}

/*Navigate_To_Second_Activity=(car_Type)=>
    {
      //Sending the JSON ListView Selected Item Value On Next Activity.
      this.props.navigation.navigate('Second', { JSON_ListView_Clicked_Item: car_Type});

    }*/

    clickedItemText( clickedItem )
    {
        this.props.navigation.navigate('Item', { item: clickedItem });
    }


  static navigationOptions =
    {

     title: 'MainActivity',

    };
    render()
    {
      if (this.state.Loading_Activity_Indicator) {
        return (
          <View style={styles.ActivityIndicator_Style}>

            <ActivityIndicator size = "large" color="#009688"/>

          </View>
        );
      }

      return (

        <View style={styles.MainContainer}>

    <TextInput 
         style={styles.TextInputStyleClass}
         onChangeText={(text) => this.SearchFilterFunction(text)}
         value={this.state.text}
         underlineColorAndroid='transparent'
         placeholder="Search Here"
          />

       <ListView

            dataSource={this.state.dataSource}
            renderRow = {( rowData ) =>
              <TouchableOpacity style = { styles.item } activeOpacity = { 0.4 } onPress = { this.clickedItemText.bind( this, rowData ) }>
                  <Text style = { styles.text }>{ rowData.car_Type }</Text>
              </TouchableOpacity>

          }

          renderSeparator = {() =>
            <View style = { styles.separator }/>
        }

        enableEmptySections = { true }

          />

        </View>
      );
    }



}

export default MyNewProject=   StackNavigator(
{
  First:   {screen: AutoCompActivity},
  Item: {screen: ServiceListDetails}

}


);

const styles = StyleSheet.create(
  {
    MainContainer:
    {
       justifyContent: 'center',
       flex:1,
       margin: 10

    },

    TextStyle:
    {
       fontSize: 23,
       textAlign: 'center',
       color: '#000',
    },

    rowViewContainer: 
    {

      fontSize: 17,
      paddingRight: 10,
      paddingTop: 10,
      paddingBottom: 10,

    },

    ActivityIndicator_Style:
    {

      flex: 1, 
      alignItems: 'center', 
      justifyContent: 'center',
      left: 0, 
      right: 0, 
      top: 0, 
      bottom: 0,

    },

    TextInputStyleClass:{

      textAlign: 'center',
      height: 40,
      borderWidth: 1,
      borderColor: '#009688',
      borderRadius: 7 ,
      backgroundColor : "#FFFFFF"

      },


    separator:
    {
        height: 2,
        backgroundColor: 'rgba(0,0,0,0.5)'
    },
    item:
    {
        padding: 15
    },

    text:
    {
        fontSize: 18
    },

  });

当用户在第一个屏幕 AutoCompActivity 上滑动时，我将转到第二个屏幕 ServiceListDetails。

当我进入第二个屏幕时，我不确定如何根据从第一个 ListView 传递的 id 过滤第二个 JSON 文件。如果我做错了什么，我可以更改我的整个代码。

在这方面的任何帮助将不胜感激。

标签： reactjsreact-nativereact-android

解决方案

推荐阅读