反转平面列表

Posted 2023-04-13

【中文标题】反转平面列表

【英文标题】：Inverting a FlatList

【发布时间】：2017-09-09 23:50:57

【问题描述】：

我目前正在开发一个适用于 android 的 react 本机应用程序，并且可以访问新的 FlatList。它有一些非常需要的功能。但是，我的列表视图是使用 react-native-invertable-scroll-view 反转的。这似乎不适用于 FlatList。滚动未正确反转。

有谁知道如何反转 FlatList？或者也许如何加载一个平面列表，然后在用户没有注意到的情况下强制滚动到底部？我自己强制向下滚动的尝试经常被延迟。

【参考方案1】：

这现在在 FlatList 中开箱即用！

只需使用：

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

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

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

【讨论】：

非常感谢，我可以根据您的建议重新整理我的水平列表。谢谢

完美的描述。非常感谢。

这会导致糟糕的用户体验

完全没有，这取决于你想做什么。如果您正在构建一个聊天应用程序，那么这是有道理的

哦，你救了我的命，

【参考方案2】：

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>)

享受它）

【讨论】：

成功了！谢谢Богдан :-)

我想知道您是否有任何具有 Android 功能的 cmets？我们在生产聊天中使用它，但列表不适用于华为荣耀 8 手机，但大多数其他手机都可以。

注意上面，你应该调用this.props.messages.slice().reverse()，因为.reverse()会在一些地方修改列表，导致状态、redux等问题。

这行得通，但我认为，这是一个不好的做法，需要获取更多数据来列出

这太神奇了！！为我解决了很多问题。如果数据已经是正确的格式，你也不需要 reverse() 数据。

【参考方案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

【讨论】：

关于如何将下拉刷新与内容一起反转的任何想法？在聊天应用程序中，您需要在顶部加载较早的消息。有了这个方案，FlatList的onRefresh会在底部添加RefreshControl。

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

@mitelone 你对此持肯定态度吗？我一直在我自己的应用程序中使用它，尚未彻底测试，但经过简要检查，它看起来 RefreshControl 位于顶部。如果确实是它被添加到底部的情况，我对如何翻转它没有任何好主意。测试后我会考虑的。

@BrunoPeres 感谢您的提示，已编辑答案以包含有关修复技术细节的信息。