Question

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
       <FlatList
          inverted
          data={[{key: 'a'}, {key: 'b'}]}
          renderItem={({item}) => <Text>{item.key}</Text>}
        />
        <Text>123</Text>
      </View>
    );
  }
}

当数据量较小时，使用inverted FlatList将从下至上渲染项目。

当我经营博览会小吃时 a和b在底部。我希望这从顶部开始。

使用inverted的{{1}}选项数据较小时可以从顶部渲染吗？

https://snack.expo.io/r1eZBINGH

如果FlatList在顶部显示并且滚动可以从底部开始，则是否删除inverted并不重要。有解决方法吗？

Answer 1

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
       <FlatList
          inverted
          data={[{key: 'a'}, {key: 'b'}]}
          contentContainerStyle={{
            flexGrow: 1, justifyContent: 'flex-end',
          }}
          renderItem={({item}) => <Text>{item.key}</Text>}
        />
        <Text>123</Text>
      </View>
    );
  }
}

我通过设置contentContainerStyle解决了这个问题。当数据较小时，flexGrow: 1和justifyContent: 'flex-end'处于inverted状态的全屏模式似乎从顶部开始。

使用FlatList反转时可以从顶部渲染吗？

1 个答案: