反平面列表

我目前正在为android的反应本机应用程序工作，并有权访问新的FlatList。它有一些非常需要的功能。但是，我的listview是使用react-native-invertable-scroll-view反转的。这似乎不适用于FlatList。滚动没有正确反转。反平面列表

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

来源

2017-04-13 Ramzi C.

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

享受它）

来源

2017-05-07 23:48:24

工作！谢谢Богдан:-) – Francesco

这工作就像一个魅力。 – Lorenz

我想知道您是否对Android功能有任何意见？我们正在使用这个在我们的生产聊天中，这份名单并不适用于Huwaii Honor 8手机，但大多数人都没有问题。 –

-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

来源

2017-06-14 22:24:54 nickcharles

关于如何反转的内容的任何想法也拉到刷新？在聊天应用程序中，您需要在顶部加载早期的消息。有了这个解决方案，FlatList的onRefresh将在底部添加RefreshControl。 – mitelone

尽管这个链接可能回答这个问题，但最好在这里包含答案的基本部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 - [来自评论]（/ review/low-quality-posts/16424795） –

@mitelone你对此有利吗？我一直在我自己的应用程序中使用它，没有进行彻底的测试，但在简短的检查中，它看起来像RefreshControl在顶部。如果这确实是它被添加到底部的情况下，我不知道如何翻转它。我会在经过一些测试后再考虑。 – nickcharles

这体现出来的FlatList盒子！

只需使用：

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

这使得第一项出现在列表的底部，并在列表开始在底部，显示的第一个项目。

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

来源

2017-10-09 16:16:56

这应该是被接受的答案 – Khriz

非常感谢我可以用你的建议rtl我的水平列表。谢谢 –

回答

相关问题