有没有人有任何导致另一个列表视图的列表视图示例，例如，如果我的列表视图具有以下内容：
单亲家庭
多路复用
双工
4卧室住宅
如果有人选择单 4 卧室住宅，我希望用户引导到另一个列表视图，该视图显示 4 卧室住宅可用的地方。我怎样才能做到这一点：
环道
橙子
河公路
环城路
我正在使用两个 JSON 文件来实现我正在尝试做的事情：
[
{
"id":0,
"House_Type": "2 Bedroom"
},
{
"id":1,
"House_Type": "3 Bedroom"
},
{
"id":2,
"House_Type": "Condo"
},
{
"id":3,
"House_Type": "4 Bedroom"
},
{
"id":4,
"House_Type": "Duplex"
},
{
"id":5,
"House_Type": "Multiplex"
}
]
第二个 JSON 文件
[
{
"id": 0,
"PID" : 0,
"Address": "123 Test Drive",
"Location": "Orange",
"Zip": 123456"
},
{
"id": 1,
"PID" : 0,
"Address" : "234 Test Drive2",
"Location": "Ring Road",
"Zip": "226106"
},
{
"id": 2,
"PID" : 0,
"Address" : "111 Test Drive2",
"Location": "Bell Road",
"Zip": "226172"
},
{
"id": 3,
"PID" : 0,
"Address" : "111 Test Drive2",
"Location": "Bell Road",
"Zip": "226172"
},
{
"id": 1,
"PID" : 1,
"Address" : "111 Test Drive2",
"Location": "Bell Road100",
"Zip": "226172"
},
{
"id": 4,
"PID" : 1,
"Address" : "222 Test Drive3",
"Location": "Ring Road",
"Zip": "226173"
},
{
"id": 5,
"PID" : 1,
"Address" : "333 Test Drive3",
"Location": "Ring100 Road",
"Zip": "221112"
},
{
"id": 6,
"PID" : 1,
"Address" : "333 Test Drive3",
"Location": "Ring100 Road",
"Zip": "221113"
},
{
"id": 7,
"PID" : 2,
"Address" : "444 Test Drive3",
"Location": "Shepard Road",
"Zip": "221113"
},
{
"id": 8,
"PID" : 2,
"Address" : "555 Test Drive3",
"Location": "Shepard1000 Road",
"Zip": "221141"
},
我想要这样的东西：
第一个列表视图：
2 间卧室
3 间卧室
公寓
4 卧室
双工
多路复用
当用户选择 2 Bedroom 时，他/她将被重定向到另一个列表视图，如下所示：
123 Test Drive
Orange, 123456
____________________
234 Test Drive2
Ring Road, 226106
_____________________
111 Test Drive2
Bell Road, 226172
__________________
以上所有内容的父 ID (PID) 为 0，与第一个 JSON 文件的 ID 匹配。
如果用户选择 3 Bedroom 那么他/她将被重定向到另一个列表视图，如下所示：
111 Test Drive2
Bell Road100, 226172
_______________________________
222 Test Drive3
Ring Road, 226173
_____________________________
333 Test Drive3
Ring100 Road, 221112
________________________
在上述情况下，父 (PID) 为 1，与第一个 JSON 文件的 ID 匹配。
我的第一个 JSON 文件中有大约 100 条记录，第二个 JSON 文件中有大约 300 条记录。我在上面给出了一些示例数据。
下面是代码和错误描述。我在代码中遇到错误：
import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView, ActivityIndicator, TextInput, TouchableOpacity } from 'react-native';
import initialData from './src/screens/houses';
import houseDetails from './src/screens/houseDetails';
export default class Information extends Component {
constructor(props) {
super(props);
this.state = {
initialDtata: initialData(),
subObjects: [],
selected_topic_id: -1,
}
}
listView(){
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var tabsData = ds.cloneWithRows(this.state.initialDtata)
return(
<View>
<ListView
style={{marginVertical: 5}}
enableEmptySections={true}
dataSource={tabsData}
renderRow={(rowData, sectionID, rowID) =>
this.displayHome(rowData, rowID)}
/>
</View>
)
}
displayHome(rowData, rowID) {
return(
<View style={{flex:1}}>
<TouchableOpacity onPress={() => this.onHomeSelection(rowID)}>
<View style={{marginVertical: 15, marginHorizontal:30, justifyContent: 'space-between', flexDirection: 'row',alignItems: 'center'}}>
<Text style={{fontSize: 10, fontWeight: 'bold'}}>{rowData.House_Type}</Text>
</View>
</TouchableOpacity>
{this.state.selected_topic_id === Number(rowID) ? this.renderQuestionList(rowData.id) : null}
</View>
);
}
onHomeSelection(rowID) {
let selected_topic_id = this.state.selected_topic_id === Number(rowID) ? -1 : Number(rowID);
this.setState({
subObjects: houseDetails(),
selected_topic_id: selected_topic_id,
})
}
renderQuestionList(rowID) {
let selected_array = [];
this.state.subObjects.map((i) => { if(i.PID === rowID) return selected_array.push(i)})
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
let tabsData = ds.cloneWithRows(selected_array)
return(
<View>
<ListView
style={{marginVertical: 5}}
enableEmptySections={true}
dataSource={tabsData}
renderRow={(rowData, sectionID, rowID) =>
this.renderQuestion(selected_array, rowID)}
/>
</View>
)
}
renderQuestion(rowData, rowID) {
let address = rowData.map((i) => {return i.Address})
return(
<View style={{flex:1}}>
<TouchableOpacity>
<View style={{marginVertical: 5, marginLeft:35, marginRight: 35}}>
<Text style={{color: 'black', fontSize: 20, fontWeight: 'bold'}}>{address}</Text>
</View>
</TouchableOpacity>
</View>
);
}
render() {
return (
<View style={{ flex:1, backgroundColor: 'white' }}>
{this.listView()}
</View>
);
}
}
module.exports = {
initialData: function() {
return (
initialDtata = [
{
"id":0,
"House_Type": "2 Bedroom"
},
{
"id":1,
"House_Type": "3 Bedroom"
},
{
"id":2,
"House_Type": "Condo"
},
{
"id":3,
"House_Type": "4 Bedroom"
},
{
"id":4,
"House_Type": "Duplex"
},
{
"id":5,
"House_Type": "Multiplex"
}
]
);
}
}
module.exports = {
houseDetails: function() {
return(
subObjects = [
{
"id": 1,
"PID" : 0,
"Address" : "234 Test Drive2",
"Location": "Ring Road",
"Zip": "226106"
},
{
"id": 2,
"PID" : 0,
"Address" : "111 Test Drive2",
"Location": "Bell Road",
"Zip": "226172"
},
{
"id": 3,
"PID" : 0,
"Address" : "111 Test Drive2",
"Location": "Bell Road",
"Zip": "226172"
},
{
"id": 1,
"PID" : 1,
"Address" : "111 Test Drive2",
"Location": "Bell Road100",
"Zip": "226172"
},
{
"id": 4,
"PID" : 1,
"Address" : "222 Test Drive3",
"Location": "Ring Road",
"Zip": "226173"
}]
);
}
}
下面是错误描述：
Invariant Violation: Element type is invalid:
expected a string (for built-in components)
or a class/function(for composite components) but got: object.
This error is located at:
in RCTView (At View.js:60)
in View(at appContainer.js:102)
in RCTView (at View.js:60)
in View (at Appcontainer.js:122)
in AppContainer (at renderApplication.js:32)
任何帮助将不胜感激。