0
我想創建與部分頭和行的列表視圖，但我很難格式化我的JSON文件。我知道這個格式是源代碼。與部分格式數據反應原生listview行
{ sectionID_1: { rowID_1: <rowData1>, ... }, ... }
*
* or
*
* { sectionID_1: [ <rowData1>, <rowData2>, ... ], ... }
*
* or
*
* [ [ <rowData1>, <rowData2>, ... ], ... ]
我試圖格式是這樣：
{
"sectionID_1": {
"r1": {
"albumId": 1,
"id": 3,
"title": "officia porro iure quia iusto qui ipsa ut modi",
"url": "http://placehold.it/600/24f355",
"thumbnailUrl": "http://placehold.it/150/1941e9",
},
"r2": {
"albumId2": 4,
"id3": 8,
"title2": "officia porro iure quia iusto qui ipsa ut modi",
"url2": "http://placehold.it/600/24f355",
"thumbnailUrl3": "http://placehold.it/150/1941e9"
}
},
"sectionID_2": {
"r1": {
"albumId": 1,
"id": 3,
"title": "officia porro iure quia iusto qui ipsa ut modi",
"url": "http://placehold.it/600/24f355",
"thumbnailUrl": "http://placehold.it/150/1941e9",
},
"r2": {
"albumId2": 4,
"id3": 8,
"title2": "officia porro iure quia iusto qui ipsa ut modi",
"url2": "http://placehold.it/600/24f355",
"thumbnailUrl3": "http://placehold.it/150/1941e9"
}
},
}
但我得到這個錯誤
Objects are bot valid as a React child ......
這是index.ios.js的完整源
import React, {
AppRegistry,
Component,
StyleSheet,
ListView,
Text,
View
}
from 'react-native';
class listView extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
});
var obj = {
"sectionID_1": {
"r1": {
"albumId": 1,
"id": 3,
"title": "officia porro iure quia iusto qui ipsa ut modi",
"url": "http://placehold.it/600/24f355",
"thumbnailUrl": "http://placehold.it/150/1941e9",
},
"r2": {
"albumId2": 4,
"id3": 8,
"title2": "officia porro iure quia iusto qui ipsa ut modi",
"url2": "http://placehold.it/600/24f355",
"thumbnailUrl3": "http://placehold.it/150/1941e9"
}
},
"sectionID_2": {
"r1": {
"albumId": 1,
"id": 3,
"title": "officia porro iure quia iusto qui ipsa ut modi",
"url": "http://placehold.it/600/24f355",
"thumbnailUrl": "http://placehold.it/150/1941e9",
},
"r2": {
"albumId2": 4,
"id3": 8,
"title2": "officia porro iure quia iusto qui ipsa ut modi",
"url2": "http://placehold.it/600/24f355",
"thumbnailUrl3": "http://placehold.it/150/1941e9"
}
},
};
this.state = {
dataSource: ds.cloneWithRowsAndSections(obj),
};
}
render() {
return (
< View style = {
styles.container
} >
< ListView dataSource = {
this.state.dataSource
}
renderSectionHeader = {
this.renderSectionHeader
}
renderRow = {
this.renderRow
}
/>
</View >
);
}
renderSectionHeader(sectionData, sectionID) {
return (< View style = {
styles.section
} >
< Text style = {
styles.sectionText
} > {
sectionID
} < /Text>
</View >
)
}
renderRow(rowData, sectionID, rowID, highlightRow) {
return <View >
<Text> {
rowData
} < /Text>
</View >
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 40
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('listView',() => listView);在此先感謝!!!!!!!
感謝快速反應@agent_hunt。我把它與''./data.json';'中的import DATAJSON分開，並將其賦值給變量var obj = DATAJSON;並將其稱爲我的狀態dataSource：ds.cloneWithRowsAndSections（obj）仍然出現錯誤。 – BonTheBeerman
我不知道發生了什麼，但它現在作爲單獨的文件工作。非常感謝你@agent_hunt。 – BonTheBeerman