FlatList 隐藏在大内容之后

Question

使用 React Native 0.64，我想显示一张图片后跟评论，就像 instagram 一样。

这里是我做的精简版（图片的样式和评论都管理的很好，不放代码不污染问题）:

import {
  Image,
  FlatList,
  View
} from 'react-native'

const Post = () => {
  ...

  return (
    <View>
      <Image ... />
      <FlatList
        data={comments.filter(item => null === item.reply)}
        renderItem={({ item: comment, index }) => (
          <CommentRow
            comment={comment}
            index={index}
          />
        )}
        keyExtractor={(comment) => comment.id}
      />
    </View>
  )
}

好的，这是结果：

但是我无法到达评论，因为图片占了所有高度。我无法滚动（合乎逻辑，没有滚动视图）。 我不想调整图片大小。

如果我在滚动视图中添加所有内容，如下所示：

const Post = () => {
  ...

  return (
    <ScrollView >
      <Image ... />
      <FlatList
        data={comments.filter(item => null === item.reply)}
        renderItem={({ item: comment, index }) => (
          <CommentRow
            comment={comment}
            index={index}
          />
        )}
        keyExtractor={(comment) => comment.id}
      />
    </ScrollView>
  )
}

我有这个错误：

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

如果我在 FlatList 之前添加 scrollview，导航会很糟糕，显示也很糟糕，像这样：

Answer 1

因为您不使用分页，所以您可以使用 map 而不是 FlatList 并遵循以下代码：

无分页

const Post = () => {
...
  return (
    <ScrollView>
      <Image .../>
      {comments
        .filter((item) => null === item.reply)
        .map((comment, index) => (
          <CommentRow {...{ comment, index }} key={index.toString()} />
        ))}
    </ScrollView>
  );
};

但是如果你有分页，请将图像放在 FlatList 的 ListHeaderComponent 上，然后按照以下代码操作：

分页

import {
  Image,
  FlatList,
  View
} from 'react-native'

const Post = () => {
  ...

  return (      
      <FlatList
        ListHeaderComponent={()=>(<Image ... />)}
        data={comments.filter(item => null === item.reply)}
        renderItem={({ item: comment, index }) => (
          <CommentRow
            comment={comment}
            index={index}
          />
        )}
        keyExtractor={(comment) => comment.id}
         /** pagination */
      />
  )
}

FlatList 隐藏在大内容之后

FlatList is hidden after big content

react-native

react-native-flatlist