有没有人有列表视图的任何示例导致另一个列表视图，例如，如果我有listview具有以下内容：
单户住宅
Mulitplex
双面
4间卧室的房子
如果有人选择单人4卧室住宅，我希望用户进入另一个列表视图，该视图显示4卧室住宅的可用位置。我该怎么做：
Circle Road
橙
河道
环路
我正在使用两个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卧室
三卧室
公寓
4卧室
双面
复用
当用户选择2个卧室时，他/她将被重定向到另一个列表，如下所示：
123 Test Drive
Orange, 123456
____________________
234 Test Drive2
Ring Road, 226106
_____________________
111 Test Drive2
Bell Road, 226172
__________________
以上所有内容的父ID（PID）均为0，与第一个JSON文件的ID匹配。
如果用户选择3卧室，则他/她将被重定向到另一个列表，如下所示：
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)
任何帮助将不胜感激。
答案 0 :(得分：0)
你可以试试这个：
import { initialData } from 'src/screens/houses';
import { houseDetails } from 'src/screens/housesDetails';
export default class Information extends Component {
constructor(props: Object) {
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: Object, rowID: number) {
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: Object, rowID: number) {
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>
);
}
}
you can do import { initialData } from 'src/screens/houses';
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"
}
]
);
}
}
and import { houseDetails } from 'src/screens/housesDetails';
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"
}]
);
}
}
嘿@ user54967对不起延迟