我正在尝试使用 react native 构建一个聊天应用程序。我正在使用 flatlist 列出对话的消息。
export default class ExampleConversation extends React.Component {
_renderItem = ({item}) => {
return (
<View style={{backgroundColor: 'white', margin: 4, flexDirection: 'row'}}>
<Text>{item.sender.id}</Text>
<Text>{item.body}</Text>
</View>
)
};
render() {
return <FlatList
data={data}
renderItem={this._renderItem}
keyExtractor={(item, id) => item.id}
style={styles.container}
inverted={true}/>
}
}
从服务器获取的 JSON 数据:
const data = [
{
"id": 13,
"sender_id": 1,
"body": "Some message"
},
{
"id": 12,
"sender_id": 1,
"body": "Some message"
},
{
"id": 11,
"sender_id": 5,
"body": "Some message"
}
];
从上面的数据可以看出,第一条和第二条消息都来自同一个发件人(
sender_id: 1
)。当上一条消息和当前消息来自同一个发件人时,我想删除 <Text>{sender_id}</Text>
对于该消息对象。 return (
<View style={{backgroundColor: 'white', margin: 4, flexDirection: 'row'}}>
<Text>{item.body}</Text>
</View>
)
基本上,我想通过检查为 Flatlist 数据提供的元素来更改 Message 组件的布局,就像 facebook messenger 显示其消息的方式一样。
如何通过 Flatlist 数据的键值区分前一个元素和当前元素?
最佳答案
Flatlist的renderItem
prop 提供了一个 index
当前渲染项的属性。您可以使用索引来查找上一个项目的发件人是否相同。要实现这种行为,您需要对数据进行排序。
例如
const data = [
{
"id": 13,
"sender_id": 1,
"body": "Some message",
"sentDate": 00003,
},
{
"id": 12,
"sender_id": 1,
"body": "Some message"
"sentDate": 00002,
},
{
"id": 11,
"sender_id": 5,
"body": "Some message"
"sentDate": 00001,
}
];
isSenderSame = ({currentMessage, prevMessage}) => {
return currentMessage.sender_id === prevMessage.sender_id;
}
_renderItem = ({item, index}) => {
const style = isSenderSame(item, this.state.data[(index - 1)]) ? styles.sameMessageStyle : styles.differentMessageStyle;
return (
<View style={[{backgroundColor: 'white', margin: 4, flexDirection: 'row'}, style]}>
<Text>{item.sender.id}</Text>
<Text>{item.body}</Text>
</View>
)
};
render() {
return <FlatList
data={this.state.data}
renderItem={this._renderItem}
keyExtractor={(item, id) => item.id}
style={styles.container}
inverted={true}/>
}
更新
另一种方法是让服务器对数据进行排序。您可以在块中发送消息并在
renderItem
中使用循环呈现它们。const data = [{
"sender_id": 5,
"messages": [{
"id": 14,
"body": "Some message"
"sentDate": 00006
}]
}, {
"sender_id": 1,
"messages": [{
"id": 13,
"body": "Some message",
"sentDate": 00003
}, {
"id": 12,
"body": "Some message"
"sentDate": 00002,
}]
}, {
"sender_id": 5,
"messages": [{
"id": 11,
"body": "Some message"
"sentDate": 00001
}]
}]
关于reactjs - 从react native中Flatlist的数据中区分前一个元素和当前元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46368242/