我有两个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"
}
]
My First 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过滤listview中的列表。另外,我无法读取从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文件。如果我做错了,我可以改变我的整个代码。
任何有关方面的帮助都将受到高度赞赏。