在React Native中使用Flatlist

Question

我的单位列表现在如何显示任何列表，而其中的某些内容只是空白 容器：

此处为json数据：

       time
0   9:00:00
1  10:00:00
2  11:00:00
3  12:00:00
4  13:00:00
5  14:00:00

从regres.in测试虚拟数据，这里是我的代码：

{
    "page": 2,
    "per_page": 3,
    "total": 12,
    "total_pages": 4,
    "data": [
        {
            "id": 4,
            "first_name": "Eve",
            "last_name": "Holt",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
        },
        {
            "id": 5,
            "first_name": "Charles",
            "last_name": "Morris",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
        },
        {
            "id": 6,
            "first_name": "Tracey",
            "last_name": "Ramos",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
        }
    ]
}

有关信息，我正在使用此版本：

  

“ expo”：“ ^ 27.0.1”，“ native-base”：“ ^ 2.6.1”，       “ react”：“ ^ 16.4.1”，       “ react-native”：“〜0.55.2”

有什么建议吗？

Answer 1

它现在可以工作了……这里是如何工作的……

1. 请确保您按照doc这样的格式设置api响应：

  

data = {[{title：'Title Text'，key：'item1'}，...]}

注意： 如果您将https://reqres.in用作伪数据，请确保获得这样的响应。

this.setState({ data: response.data.data });

1. 在此处使用Flatlist和keyExtractor代码示例：

    <FlatList
          data={this.state.data}
          keyExtractor={this._keyExtractor}
          renderItem={({item}) => 
          <Text>{item.first_name}</Text>    
   
    }
     />
   

2. 请参见_keyExtractor（用于制作虚拟化密钥的提取器密钥）和此处的代码：

   ._keyExtractor = (item, index) => index.toString();