Question

我目前正在开发针对Android的react native应用程序，并且可以访问新的FlatList。它有一些非常需要的功能。但是，我的listview使用react-native-invertable-scroll-view反转。这似乎与FlatList无法正常工作。滚动没有正确反转。

有谁知道如何反转FlatList？或者也许如何加载一个Flatlist，然后强制滚动到底部而不是用户注意到它？我自己试图强行向下滚动的尝试经常被推迟。

Answer 1

这现在是FlatList中开箱即用的！

只需使用：

<FlatList
  inverted
  data=...
  renderItem=...
/>

这会导致第一项出现在列表的底部，列表从底部开始，显示第一项。

如果您需要在底部显示最后一项，只需反转您在data道具中提供的阵列。

Answer 2

如其他答案中所述，目前最好的方法是将变换应用于包含反转它的视图的FlatList。

return (
    <View style={{ transform: [{ scaleY: -1 }] }} >
        <FlatList
            renderItem={this._renderItem}
            ...
        />
    </View>
);

然后对每个列表项应用相同的转换，以确保它们被正确地重新定向。

_renderItem = (info) => {
    return (
        <View style={{ transform: [{ scaleY: -1 }] }}>
            {this.props.renderItem(info)}
        </View>
    );
}

我已经编写了一个完全符合要求的软件包，您只需使用它来代替标准FlatList组件并传递inverted属性。

https://www.npmjs.com/package/react-native-invertible-flat-list

反转FlatList

2 个答案: