React Native 实现chat 即时聊天（第2天）react-native-gifted-chat调教

自己写了聊天界面后，在网上查资料完善的过程中，无意中发现了react-native-gifted-chat这个组件。用了下这个组件功能还挺全的，就是默认配置跟国人使用习惯略不同。稍微调整了下。

主要调整：

1. 日期本地化
2. 英文 =》中文
3. 其他细节微调

效果如下：

代码

/* eslint-disable prettier/prettier */
import React, { useState, useCallback, useEffect } from 'react';
import { GiftedChat,Bubble,Send } from 'react-native-gifted-chat';
// 引入中文语言包
import 'dayjs/locale/zh-cn';
import {View,Text} from 'react-native';

export default function Example() {
    const [messages, setMessages] = useState([]);
    useEffect(() => {
        setMessages([
            {
                _id: 1,
                text: '码农先生，开始聊天吧！',
                createdAt: new Date(),
                user: {
                    _id: 2,
                    name: 'React Native',
                    avatar: 'https://placeimg.com/140/140/any',
                },
            },
        ])
    }, []);
    const onSend = useCallback((msg = []) => {
        setMessages(previousMessages => GiftedChat.append(previousMessages, msg))
    }, []);

    const renderBubble = (props) => {
        return (
            {
                    right: {
                        color: 'black',
                    },
                }}
                wrapperStyle={{
                    right: {
                        backgroundColor: '#95ec69',
                    },
                }}
            /
        );
    };

    const renderSend= (props)=> {
        return (
            
                {marginRight: 10, marginBottom: 5}}
                    {color: '#0366d6',fontSize:18}}发送
                
            
        );
    }

    return (
         onSend(messages)}
            showUserAvatar={true}
            locale={"zh-cn"}
            showAvatarForEveryMessage={true}
            renderBubble={renderBubble}
            placeholder={"开始聊天吧"}
            renderSend={renderSend}
            user={{
                _id: 50,
            }}
        />
    )
}

参考：

https://github.com/FaridSafi/react-native-gifted-chat