Question

请有人启发一下如何循环FlatList嵌套数组？我知道这已经是一个有关此主题的问题，但如何使用项目参数仍然是无法理解的！
举个例子：在React中有 posts.jsx

var size = 1;
    const posts = this.state.posts.map(post => {
      return (
        <Link to={`/posts/${post.slug}`}>
          <div className="columns col-gapless" key={post.id}>
            <div className="column col-3 ">
              {post.attachments.slice(0, size).map(a => (
                <img
                  className="img-responsive"
                  key={a.id}
                  src={a.image.thumb.url}
                  alt=""
                />
              ))}
            </div>
            <div className="column col-6  ">
              <h5>{post.title}</h5>
              <p>{post.body}</p>
            </div>
          </div>
        </Link>

但是在RN上发帖


_renderItem = ({ item }) => {
    let size = 1;
    const items = item.attachments
      .slice(0, size)
      .map(a => (
        <Image
          style={{ width: 100, height: 75, flex: 1 }}
          key={a.id}
          resizeMode="cover"
          source={{ uri: a.image.thumb.url }}
        />
      ));

    return (
      <View style={{ height: 100 }}>
        <View>{items}</View>
        <Text>{item.title}</Text>
      </View>
    );

  };


  <FlatList
          data={this.state.posts}
          keyExtractor={(_, index) => `item-${index}`}
          renderItem={this._renderItem}
          ItemSeparatorComponent={this.renderSeparator}
          onEndReached={this.onNextPage}
          onEndReachedThreshold={0.01}
        />
);

列表将显示帖子，但不会渲染帖子中的图像！所以我的疑问是不渲染图像，因为数组中是否有对象或数组？和FlatList不能很好地与嵌套数组一起使用？无论如何，任何帮助都会很棒！

Answer 1

您的_renderItem函数似乎未返回任何内容。

除非发布问题时出现复制粘贴错误，否则请在return items;的末尾添加_renderItem语句。

更新：
如果您始终只需要第一张图像，为什么不做这样的事情并避免使用Array？

_renderItem = ({ item }) => {
    const a = item.attachments[0];
    const items = 
        <Image
          style={{ width: 100, height: 75, flex: 1 }}
          key={a.id}
          resizeMode="cover"
          source={{ uri: a.image.thumb.url }}
        />;
    ...

如何循环一个FlatList嵌套数组

1 个答案: