Question

我正在尝试使用react-native并使用平面列表来显示消息来构建聊天应用程序。而且我希望我的清单始终排在最后，任何人都可以给我提出解决方案的建议。

Answer 1

基本上，您需要在flatList上使用 scrollToEnd 。

首先：创建一个 flatList 引用：

ref={ (ref) => { this.myFlatListRef = ref } }

第二：在flatList上添加 onContentSizeChange 侦听器

onContentSizeChange={ () => { this.myFlatListRef.scrollToEnd({animated:true}) } }

第三步：在flatList上添加 onLayout 侦听器，以在显示键盘时滚动到底部。

onLayout={ () => { this.myFlatListRef.scrollToEnd({animated:true}) } }

例如：

<FlatList
    ref={ (ref) => { this.myFlatListRef = ref } }
    onContentSizeChange={ () => { this.myFlatListRef.scrollToEnd({animated:true}) } }
    onLayout={ () => { this.myFlatListRef.scrollToEnd({animated:true}) } }
    data={this.state.messages}
    renderItem={ ({item}) => <Item data={item} /> }
    />

Answer 2

您可以将ref赋予FlatList，并访问某些可以在特定位置滚动的flatList属性。在这里，下面的分辨率应该起作用。

setTimeout(() => this.refs.flatList.scrollToEnd(), 200)

ScrollToEnd React native

Answer 3

最简单的方法是在单位列表中使用inverted个道具这使我们可以上下颠倒地呈现列表

有关更多参考。 vidit https://facebook.github.io/react-native/docs/flatlist#inverted

Answer 4

在这里，您可以执行此操作-

const  messageData  = this.props.convo
    return (
      <View style={{ flex: 1 }}>

            <FlatList 
              inverted={-1}
              style={styles.list}
              extraData={this.props}
              data={messageData}
              keyExtractor = {(item) => {
                return item.id;
              }}
              renderItem=   
              {this.renderItem}           
              />

此后，您将获得一个反向列表，该列表将具有列表中的最高元素，因此，要解决此问题，可以在平面列表数据或化简器中添加reverse()。像这样- data={messageData.reverse()}或减速器return { ...state, chats: action.payload.reverse() }

第一次渲染时如何使本机组件的平面列表滚动到底部？

4 个答案: