Question

我正在使用具有聊天功能的react native制作应用。我的FlatList是倒置的，一切都很顺利，除了消息的顺序，我希望我的聊天（每隔一次聊天）给我看最后的消息，而不是旧消息。

Screenshot of App layout with inverted messages

这是我的渲染代码：

FILE_UPLOAD_MAX_MEMORY_SIZE

Answer 1

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

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

Answer 2

您可以尝试将FlatList的以下各项设置为真

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

想象一下，您需要还原对象层次结构内部的数组的顺序。父母的亲戚有孩子（数组）：

const parent = {
    name: 'John Doe',
    relatives: {
        children: [
            {
                name: 'Markus'
            },
            {
                name: 'Jonas'
            }
        ]
    }
}

如果要更新孩子的顺序，则需要执行以下操作：

const parentUpdatedClone = {
    ...parent,
    relatives: {
        ...relatives,
        children: parent.relatives.children.reverse()
    }
}

我希望对您有帮助

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

3 个答案: