反应本机平面列表反转顺序

Question

我正在使用具有聊天功能的 react native 制作应用程序。我的 FlatList 是倒置的，一切都按预期顺利，除了消息的顺序，我希望我的聊天（每隔一个聊天直播）向我显示最后的消息，而不是较旧的消息。

带有反向消息的 App 布局屏幕截图

这是我的渲染代码：

<View style={styles.messages}>
     <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <FlatList
                ref={(c) => { this.flatList = c }}
                data = {this.props.messages}
                keyExtractor={item => item.id}
                renderItem = {({item}) => 
                  <MessageRow img={item.img}  
                  msg = {item.attributes} 
                  my_user_id={this.props.my_user_id}/>
                }
                inverted
              />  
     </TouchableWithoutFeedback>
</View>

Answer 1

你可以尝试将FlatList的props设置inverted为true

<View style={styles.messages}>
 <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <FlatList
            ref={(c) => { this.flatList = c }}
            data = {this.props.messages}
            keyExtractor={item => item.id}
            inverted={true}
            renderItem = {({item}) => 
              <MessageRow img={item.img}  
                msg = {item.attributes} 
                my_user_id={this.props.my_user_id}
              />
            }
            inverted
          />  
 </TouchableWithoutFeedback>
</View>

messages仅供参考，如果用于messages.reverse()数据，我在更新后渲染时遇到错误。

参考： https: //facebook.github.io/react-native/docs/flatlist#inverted

Answer 2

Flatlist 结构项取决于您的数据顺序。您可以做的是反向消息数组道具。如果来自减速机，应该是

return {...state, messages: messages.reverse()}