React Native：FlatList 中的 RenderItem。如何映射存储在本地状态的数组？

Question

我正在使用 React Native 创建一个小型应用程序，该应用程序具有用于存储图像的本地 SQLite 数据库，但在渲染我的图像数组时遇到了问题（从本地数据库获取并存储在本地状态中）。

在我通过映射数据进行渲染之前，效果很好。

  state = {
    items:[when the user uses the app this array fills with images],
  };

<ScrollView>
        {items.map(({ id, value }) => (
          <TouchableOpacity onPress={this.deletePhoto}
            key={id}>
            <Image source={{ uri: value }} style={{ width: null, height: 400 }} />
          </TouchableOpacity>

        ))}
      </ScrollView>
    );
  }

但现在我想更进一步，使用我选择的格式（网格）在 FlatList 中呈现数据。虽然我可以让 FlatList 呈现数组中的图像数量，但我无法让实际图像显示。 不知道如何成功传递数据？

  renderItem = ({ id, value }) => {
  const { items } = this.state;
  if (items.empty === true) {
    return <View style={[styles.item, styles.itemInvisible]} />;
  }
  return (
    <TouchableOpacity style={styles.item} onPress={this.deletePhoto} key={id}>
            <Image source={{ uri: value }} style={{ width: null, height: 400 }} />
    </TouchableOpacity>
  );
  };

对于上下文，这是使用“id”和“value”属性创建“items”SQL 表：

componentDidMount() {
    db.transaction(tx => {
      tx.executeSql(
        'create table if not exists items (id integer primary key not null, value text);'
      );
    });
  }

我想问题是，我如何将 items 数组的属性传递/访问到功能组件中？

更新：

https://ibb.co/hMY1qBy（我得到的 - 例如 DB 条目创建视图但没有图像渲染） https://ibb.co/RN4rqyK（我从下面的答案中得到了什么）

Answer 1

从您共享的存储库中获取可重现的代码后，我设法呈现列表中的图像。

这是你的renderItem 函数

renderItem = ({ item }) => {
  const { items } = this.state;
  if (items.empty === true) {
    return <View style={[styles.item, styles.itemInvisible]} />;
  }
  return (
    <TouchableOpacity style={styles.item} onPress={this.deletePhoto} key={item.id}>
            <Image source={{ uri: item.value }} style={{ width: 400, height: 120 }} />
    </TouchableOpacity>
  );
  };

您必须从renderItem 函数的参数中获取item，还必须将宽度传递给图像以进行渲染，上面的代码工作正常。

Answer 2

flatlist renderItem 属性获取一个具有多个属性的参数，主要是 item 和 index，它们通常用于访问行中的项目，您可以使用如下所示的 item

<FlatList
        data={items}
        renderItem={({ item }) => (
          <TouchableOpacity style={styles.item} onPress={this.deletePhoto} key={item.id}>
            <Image source={{ uri: item.value }} style={{ width: null, height: 400 }} />
    </TouchableOpacity>
        )}
        keyExtractor={item => item.id}
      />