Смахивание ListView перейдет к другому ListView

У меня есть два файла JSON. Я хочу, чтобы, если пользователь пролистывает один ListView, данные для которого поступают из первого файла JSON, он / она будет перенаправлен в другой ListView, данные для которого поступают из второго файла JSON. Ниже приведена структура моего JSON-файла с именем Car_Types.

[
{
    "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 должен выглядеть так:

БМВ


Мерседес Бенц


указ


Volkswagon


Honda


Lexus

когда кто-то пользуется BMW, я должен быть перенаправлен на другой listView, и он должен отображаться ниже ListView

2018 BMW X5 North Point


2018 BMW X6 North Point2


2018 BMW X3 North Point 3


2018 BMW X1 North Point4

Эти четыре элемента будут отображаться только потому, что идентификатор BMW равен 0 в моем первом списке JSON, а fk(foreignKey) равен 0 в моем втором списке JSON. Другими словами, когда id = fk, он должен отображать Listview на моем втором экране.

Вот что я имею в коде. Мой код первого экрана работает, но когда я перехожу ко второму экрану, я не могу отфильтровать список в моем просмотре списка на основе идентификатора, который передается с первого экрана. Кроме того, у меня возникают проблемы с чтением идентификатора, который передается с первого экрана

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
    },

  });

Я собираюсь на второй экран ServiceListDetails, когда пользователь проводит на первом экране AutoCompActivity.

когда я попал на второй экран, я не уверен, как отфильтровать второй файл JSON на основе идентификатора, который передается из первого ListView. Я могу изменить весь мой код, если я делаю что-то не так.

Любая помощь в уважении будет высоко оценен.

0 ответов

Другие вопросы по тегам