Question

我想在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."
}
]

这是我现在的代码：

 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>

    );
  }
});

Answer 1

rowData是一个对象，因此列表的renderRow属性应该类似于

renderRow: function(rowData) {
  return (
    <View style={styles.row}>
      <Text>{rowData.Gattung}</Text>
      <Text>{rowData.ab}</Text>
      <Text>{rowData.bis}</Text>
    </View>
  );
}

在循环中调用setState也是个坏主意。如果reponseData是一个数组，那么this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData)});就足够了。

检查此示例：https://rnplay.org/apps/4qH1HA

Answer 2

  //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（{

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',
 } 
});'

React-Native：在ListView中显示JSON数据

2 个答案: