反转FlatList

Question

我目前正在开发一款适用于安卓的react原生应用程序，并且可以访问新的FlatList。它有一些非常需要的功能。但是，我的listview是使用react-native-invertable-scroll-view反转的。这在FlatList中似乎不能正常工作。滚动未正确反转。

有人知道如何反转FlatList吗？或者如何加载Flatlist，然后在用户不注意的情况下强制滚动到底部？我自己强制向下滚动的尝试经常被延迟。

Answer 1

render() {
const messages = this.props.messages.reverse();

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

_keyExtractor = (item, index) => item.id+''+index;

_renderItem = ({item}) => (
<View style={{ transform: [{ scaleY: -1 }]}}>
  <ChatItem />
</View>)

享受它)

Answer 2

这在FlatList中是开箱即用的！

只需使用：

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

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

如果您需要在底部显示最后一项，只需反转您在data属性中提供的数组。

Answer 3

正如在其他答案中所描述的，目前最好的方法是将转换应用于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