reactjs - 从react native中Flatlist的数据中区分前一个元素和当前元素

Question

我正在尝试使用 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 数据的键值区分前一个元素和当前元素？

Answer 1

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
    }]
}]