React-Native：在 ListView 中显示 JSON 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38589578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-Native: Display JSON Data in ListView
提问by profidash_98
I want to display JSON-Data in a ListView. The Problem is, that the JSON data contains Dictionaries. In one Row I would like to display 'Gattung', 'ab' and 'bis'. I am not able to display following JSON-Data in a ListView:
我想在 ListView 中显示 JSON-Data。问题是，JSON 数据包含字典。在一行中，我想显示“Gattung”、“ab”和“bis”。我无法在 ListView 中显示以下 JSON 数据：
[
{
"Gattung": "ICE",
"Zugummer": 26,
"ab": "Regensburg Hbf",
"bis": "Hanau Hbf",
"Wochentag": "Fr",
"Zeitraum": ""
},
{
"Gattung": "ICE",
"Zugummer": 27,
"ab": "Frankfurt(Main)Hbf",
"bis": "Regensburg Hbf",
"Wochentag": "So",
"Zeitraum": ""
},
{
"Gattung": "ICE",
"Zugummer": 28,
"ab": "Regensburg Hbf",
"bis": "W??rzburg Hbf",
"Wochentag": "Fr",
"Zeitraum": ""
},
{
"Gattung": "ICE",
"Zugummer": 35,
"ab": "Hamburg Hbf",
"bis": "Puttgarden",
"Wochentag": "tgl.",
"Zeitraum": "25.06. - 04.09."
},
{
"Gattung": "ICE",
"Zugummer": 36,
"ab": "Puttgarden",
"bis": "Hamburg Hbf",
"Wochentag": "tgl.",
"Zeitraum": "25.06. - 04.09."
}
]
This is my code now:
这是我现在的代码：
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var MainView = React.createClass ({
getInitialState() {
return {
jsonURL: 'http://demo.morgenrot-wolf.de/qubidu/test.json',
dataSource: ds.cloneWithRows(['row 1', 'row 2']),
}
},
componentDidMount(){
this.loadJSONData();
},
loadJSONData() {
fetch(this.state.jsonURL, {method: "GET"})
.then((response) => response.json())
.then((responseData) =>
{
for (var i = 0; i < responseData.length; i++)
{
this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData[i]) });
}
})
.done(() => {
});
},
render() {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
});
回答by Konstantin Kuznetsov
rowData is an object, so renderRow property of your list should look something like
rowData 是一个对象，因此列表的 renderRow 属性应该类似于
renderRow: function(rowData) {
return (
<View style={styles.row}>
<Text>{rowData.Gattung}</Text>
<Text>{rowData.ab}</Text>
<Text>{rowData.bis}</Text>
</View>
);
}
Also it is bad idea to call setState inside a loop. If reponseData is an array, this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData)});should be enough.
在循环内调用 setState 也是个坏主意。如果reponseData是一个数组，this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData)});应该就够了。
Check this sample: https://rnplay.org/apps/4qH1HA
检查此示例：https: //rnplay.org/apps/4qH1HA
回答by uttam kumar sharma
//returning the main view after data loaded successfully
return (
<View style={styles.MainContainer}>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={(rowData) =>
<View style={{flex:1, flexDirection: 'column'}} >
<TouchableOpacity onPress={this.GetItem.bind(this, rowData.student_name,rowData.student_subject)} >
<Text style={styles.textViewContainer} >{rowData.id}</Text>
<Text style={styles.textViewContainer} >{rowData.student_name}</Text>
<Text style={styles.textViewContainer} >{rowData.student_phone_number}</Text>
<Text style={styles.textViewContainer} >{rowData.student_subject}</Text>
</TouchableOpacity>
</View>
}
/>
</View>
);
}
}
} const styles = StyleSheet.create({
} const 样式 = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex:1,
paddingTop: (Platform.OS === 'ios') ? 20 : 0,
backgroundColor: '#ffffff',
padding: 5,
},
textViewContainer: {
textAlignVertical:'center',
fontSize: 15,
color: '#1c1c1c',
}
});'
