react-native - 使用本地 json 的部分列表反应原生
问题描述
我有一个名为的本地 json 文件Observer.json
{
"Observer": {
"Category_2":[{
"row1" : "Reading_1",
"row2" : "Reading_2",
"row3" : "Reading_3",
"row4" : "Reading_4"
}]
}
}
我想在 react native 中使用部分列表显示这些数据。将有一个标题为 Category_2 和 4 行的部分,即。Reading_1 等请帮助我无法查看任何数据。
这是代码
import React, { Component } from 'react';
import { AppRegistry, View, Text,TouchableOpacity, ListView, StyleSheet,SectionList } from 'react-native';
import { createStackNavigator,createAppContainer } from "react-navigation";
const data_Custom = require('./Observer.json');
class RenderList extends Component {
static navigationOptions = {
title: 'List Items'
};
constructor() {
super();
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (h1, h2) => h1 !== h2,
});
this.state = {
dataSource: ds.cloneWithRowsAndSections({dataBlob: data_Custom}, {sectionIdentities:["Category_2"]}, {rowIdentities:["row1","row2","row3","row4"]} ),
};
}
renderRow(custom){
return (
<View >
<Text style = { styles.container2 }>
{custom.rowIdentities}
</Text>
</View>
);
}
renderSectionHeader(custom_s) {
return (
<Text style = { styles.container2 }>
{custom_s.sectionIdentities}
</Text>
)
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
renderSectionHeader={this.renderSectionHeader}
/>
);
}
}
const App = createStackNavigator({
List: { screen: RenderList },
});
export default createAppContainer(App);
const styles = StyleSheet.create({
container1:{
flex: 1
},
container2:{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 15,
fontSize: 18
},
item:{
padding: 15
},
text:{
fontSize: 18
},
separator:{
height: 2,
backgroundColor: 'rgba(0,0,0,0.5)'
}
});
解决方案
你可以试试下面的吗?
首先将json
文件更改如下,
[
{
"title":"Observer",
"data":[
{"row" : "Reading_1"},
{"row" : "Reading_2"},
{"row" : "Reading_3"},
{"row" : "Reading_4"}
]
}
...
]
然后使用SectionList
而不是ListView
因为ListView
已弃用。
import React, { Component } from 'react';
import { AppRegistry, View, Text,TouchableOpacity, StyleSheet,SectionList } from 'react-native';
import { createStackNavigator,createAppContainer } from "react-navigation";
const data_Custom = require('./Observer.json');
class RenderList extends Component {
static navigationOptions = {
title: 'List Items'
};
constructor() {
super();
this.state = {
dataSource: data_Custom,
};
}
renderRow(item){
return (
<View>
<Text style = { styles.container2 }>
{item.row}
</Text>
</View>
);
}
renderSectionHeader(title) {
return (
<Text style = { styles.container2 }>
{title}
</Text>
)
}
render() {
return (
<SectionList
renderItem={({item, index, section}) => this.renderRow(item)}
renderSectionHeader={({section: {title}}) => this.renderSectionHeader(title)}
sections={this.state.dataSource}
keyExtractor={(item, index) => item + index}
/>
);
}
}
const App = createStackNavigator({
List: { screen: RenderList },
});
export default createAppContainer(App);
const styles = StyleSheet.create({
container1:{
flex: 1
},
container2:{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 15,
fontSize: 18
},
item:{
padding: 15
},
text:{
fontSize: 18
},
separator:{
height: 2,
backgroundColor: 'rgba(0,0,0,0.5)'
}
});
推荐阅读
- sql - NoSQL 中如何实现不同查询的抽象视图
- c - 返回主菜单时出现问题 - C 编程
- node.js - 如何使用 Google Docs API 在特定位置插入图片
- r - 如何在ggplot中编辑当前的图例标签
- javascript - 如何在javascript中使用preventDefault删除默认操作?
- typo3 - 找不到 Typo3 V9 后端模块视图
- git - 不同的 git config 用户和 ssh 密钥,如何使 git pull 工作?
- swift - `tearDown` 调用是必要的吗?
- javascript - 如何在 React.js 中调整 Chart.JS 元素的大小?
- python - 所有主机的 Ansible 附加字典结果