Reactjs 在平面列表中显示多行

Reactjs 在平面列表中显示多行,reactjs,react-native,react-android,Reactjs,React Native,React Android,我正在平面列表中显示我的数据。我正在从JSON文件读取数据,并将其呈现在flatlist中。如何在平面列表中显示多行。下面是我的代码: componentDidCatch render() { return( <View style={styles.MainContainer}> <FlatList data={ newList } ItemSeparatorComponent = {this.FlatListItemSeparat

我正在平面列表中显示我的数据。我正在从JSON文件读取数据,并将其呈现在flatlist中。如何在平面列表中显示多行。下面是我的代码:

 componentDidCatch
  render()
  {

 return(

<View style={styles.MainContainer}>

  <FlatList

     data={ newList }

     ItemSeparatorComponent = {this.FlatListItemSeparator}

     renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.addr)} > {item.addr} </Text>}
    />


</View>
)
下面是我的JSON文件:

 [
    {
       "id":"1",

       "addr": "111 Test Drive",
       "phone": "(951)-900-111",
    "state": "CA",
        "zip": "92831"
       "LatL":"33.935888",
       "Long2":"-117.284725",

    },

    {
        "id":"2",
         "addr": "2222 Test Drive",
       "phone": "(951)-910-111",
    "state": "CA",
        "zip": "92831"
        "LatL":"33.977111",
        "Long2":"-117.373423",

     },

     {
        "id":"3",
         "addr": "3333 Test Drive",
        "phone": "(951)-922-111",
    "state": "CA",
         "zip": "92831"
        "LatL":"33.761333",
        "Long2":"-116.971169",

     }
]
我想在屏幕上显示如下数据:

111 Test Drive
(951)-900-111
CA-92831
__________________________
2222 Test Drive
(951)-910-111
CA-92831
_________________________


right now, I am just getting 

111 Test Drive
__________________________

2222 Test Drive
我想在不同的线路上显示地址、电话、州和邮政编码。我怎样才能做到这一点


任何帮助都将不胜感激。

只需将所有要显示的信息添加到项目渲染功能中即可。 因此,您将更改该行:

renderItem={({item})=>{item.addr}{{item.phone}{{item.state}{item.zip}

我就是这样做的。我也使用样式表将数据放在不同的行中

<View style={styles.MainContainer}>

  <FlatList

     data={ newList }

     ItemSeparatorComponent = {this.FlatListItemSeparator}
     renderItem={this._renderItem}

    />


</View>

 _renderItem = ({item}) => {

        return(
            <View style={styles.item}>
                <Text>{item.addr} </Text>
                <Text>{item.phone}</Text>
            </View>


        );

  }

_renderItem=({item})=>{
返回(
{item.addr}
{item.phone}
);
}

@Anjali您能分享一下解决方案吗?
<View style={styles.MainContainer}>

  <FlatList

     data={ newList }

     ItemSeparatorComponent = {this.FlatListItemSeparator}
     renderItem={this._renderItem}

    />


</View>

 _renderItem = ({item}) => {

        return(
            <View style={styles.item}>
                <Text>{item.addr} </Text>
                <Text>{item.phone}</Text>
            </View>


        );

  }