在平面列表中显示多行

Question

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

 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>
)

}

newlist 是我的 json 文件，我通过此语句

在代码顶部导入它

import newListfrom '../reducers/ServiceDetails.json';

下面是我的 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

我想在不同的行上显示地址、phone、州和邮政编码。我怎样才能做到这一点。

任何帮助将不胜感激。

Answer 1

只需将您想要显示的所有信息添加到项目渲染功能中即可。因此，您将为此更改该行：
renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.addr)} > {item.addr}{"\n"}{item.phone}{"\n"}{item.state}{item.zip} </Text>}

Answer 2

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

<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>


        );

  }

在平面列表中显示多行

displaying multiple lines in flatlist

reactjs

react-native

react-android