Есть ли у кого-нибудь пример представления списка, который приводит к другому представлению списка, например, если у меня есть представление списка, которое имеет следующие вещи:
Дом на одну семью
Mulitplex
Дуплекс
Дом с 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 Спальня, он / она будет перенаправлен в другой список, как показано ниже:
123 Test Drive
Orange, 123456
____________________
234 Test Drive2
Ring Road, 226106
_____________________
111 Test Drive2
Bell Road, 226172
__________________
Все вышеперечисленное имеет идентификатор родителя (PID), равный 0, который совпадает с идентификатором первого файла JSON.
если пользователь выберет 3 спальни, он / она будет перенаправлен в другой список. Как показано ниже:
111 Test Drive2
Bell Road100, 226172
_______________________________
222 Test Drive3
Ring Road, 226173
_____________________________
333 Test Drive3
Ring100 Road, 221112
________________________
В вышеприведенном случае родитель (PID) равен 1, что соответствует идентификатору первого файла JSON.
У меня около 100 записей в моем первом файле JSON и около 300 записей во втором JSON.файл.Я привел несколько примеров данных выше.
Ниже приведен код и описание ошибки.Я получаю сообщение об ошибке в коде:
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)
любая помощь будет оценена.