Question

我在平面列表中显示我的数据。我正在从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>
)

}

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

我想在不同的行上显示地址，电话，状态和邮政编码。我怎样才能做到这一点。

任何帮助都将受到高度赞赏。

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>


        );

  }

在平面列表中显示多行

2 个答案: