只是想分享。
我发现很难为这个包自定义默认 UI。官方文档没有那么有用。
幸运的是,我能够解决它。
查看答案
只是想分享。
我发现很难为这个包自定义默认 UI。官方文档没有那么有用。
幸运的是,我能够解决它。
查看答案
进行进口
import {GiftedChat, InputToolbar,...} from 'react-native-gifted-chat'
注意:必须导入,因为我们要自定义它 InputToolbar
创建一个调用的函数,该函数customInputToolbar
将返回自定义 UI
const customtInputToolbar = props => {
return (
<InputToolbar
{...props}
containerStyle={{
backgroundColor: "white",
borderTopColor: "#E8E8E8",
borderTopWidth: 1,
padding: 8
}}
/>
);
};
注意:必须是参数。 props
提示:由于官方 github 页面 ( https://github.com/FaridSafi/react-native-gifted-chat )中没有列出 的所有道具,因此您可以在编辑器中的标签上。这会将您导航到列出所有道具的源文件。小心不要编辑任何东西!InputToolbar
Cmd + Left Click
InputToolbar
在组件中包含renderInputToolbar
作为道具GiftedChat
<GiftedChat
messages={chatMessages.messages}
onSend={messages => sendMessage(messages)}
renderInputToolbar={props => customtInputToolbar(props)}
...
/>
注意:记住要props
作为参数传递给函数。没有这个,UI 将不会显示
你完成了 !!
包含SystemMessage
在您的导入中
创建一个名为customSystemMessage
const customSystemMessage = props => {
return (
<View style={styles.ChatMessageSytemMessageContainer}>
<Icon name="lock" color="#9d9d9d" size={16} />
<Text style={styles.ChatMessageSystemMessageText}>
Your chat is secured. Remember to be cautious about what you share
with others.
</Text>
</View>
);
};
在组件中包含renderSystemMessage
作为道具GiftedChat
你完成了
希望这可以帮助!