Question

您可能会认为这是世界上最容易找到的示例，但是我在网上发现的所有内容始终都以JSON文件作为数据源，因此有引用键

类似这样的东西...例如item.name等

const list = [
  {
    name: 'Amy Farha',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  },
  ... // more items
]

keyExtractor = (item, index) => index.toString()

renderItem = ({ item }) => (
  <ListItem
    title={item.name}
    subtitle={item.subtitle}
    leftAvatar={{
      source: item.avatar_url && { uri: item.avatar_url },
      title: item.name[0]
    }}
  />
)

我的数据源只是一个普通的单维数组，没有任何类型的键或标识符。数据就是它，不会改变

data = ['value1','value2','value3',...]

我到目前为止的代码（显然不起作用）是

import React, { Component } from 'react'
import { FlatList, ListItem } from 'react-native'

<FlatList
      data={this.state.data}
      renderItem={({ item }) => ( 
        <ListItem
        key={item.id}
        />
      )}
    />

我猜我需要在某个地方使用keyExtractor来生成id，但是如果{{1}中没有标识符，我该如何引用数据中的实际值来显示它们}像json一样？

Answer 1

尝试一下：

<FlatList
    data={this.state.data}
    keyExtractor={item => item}
    renderItem={({ item }) => (
      <ListItem
        title={item}
      />
    )}
  />

const ListItem = ({ title }) => (
  <View>
    <Text>{title}</Text>
     ...
  </View>
);

如何在FlatList中显示一维数组

1 个答案: