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