Смахивание 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. Я могу изменить весь мой код, если я делаю что-то не так.
Любая помощь в уважении будет высоко оценен.