FlatList 渲染数组的顺序错误

Question

我正在我的 React Native 应用程序中实现一个平面列表。我从 Firebase 查询数据并获取对象数组。发生了一些奇怪的事情——> FlatList 仅呈现整个数组的最后一项，并且由于没有更多数据，因此我无法滚动。示例：

我有 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 的数组

而 FlatList 只会呈现，比如说，4 个项目。这是它呈现的内容并按以下顺序：

手机中的平面列表

   4
   3
   2
   1

所以当我向下滚动它时会发生错误，因为没有更多数据要渲染，或者可能是我不明白的其他原因。

我的代码很简单：

        <FlatList
          windowSize={1}
          initialNumToRender={10}
          maxToRenderPerBatch={10}
          contentContainerStyle={styles.container}
          data={data}
          keyExtractor={(item, index) => index.toString()}
          renderItem={itemData => {
            let image = {uri: itemData.item.i};
            return (
              <CustomCardsRecipe
                img={image}
                id={itemData.item.id}
                navigate={() =>
                  this.props.navigation.navigate('MainRecipe', {
                    recipe: itemData.item,
                  })
                }
                showToastFunction={message => this.showToastFunction(message)}>
                {itemData.item.t}
              </CustomCardsRecipe>
            );
          }}
        />

有人知道为什么会这样吗？我真的可以使用一些帮助。谢谢！

Answer 1

问题出在我的风格上。

我有这个：

flexDirection: 'column-reverse',

只需删除该行即可。