在聊天屏幕上添加文件上传按钮

Question

My RN 0.61.5应用程序正在运行react-native-gifted-chat 0.13.0。以下是非常简单的渲染图：

render() {
console.log("In GiftedChat render : ");
return ( 
<GiftedChat 
messages={this.state.messages}
onSend={messages => this._onSend(messages)}
user={{_id: this.state.myself.id,
name: this.state.myself.name,
avatar: this.state.myself.user_data.avatar}}
/>         
);
}

我想通过键入文本框添加一个文件上传按钮(可以打开图库或文件管理器(，允许用户上传图像或视频文件。我该怎么做？我在网上搜索了一下文档，但没有找到在聊天屏幕上添加按钮的方法。

Answer 1

在天才聊天文档中有一个名为renderActions((的道具。它在消息编辑器的左侧添加了一个自定义操作按钮。我已经用这个实现了图像上传按钮。

<GiftedChat
messages={this.state.messages}
onSend={this.send}
...
renderActions={() => (
<React.Fragment>
<ImgPicker setmsgImgUrl={this.setmsgImgUrl} />
</React.Fragment>
)}
/>

我使用expo-docs图像选择器中的代码创建了ImgPicker组件。如果您想查看ImgPicker组件代码，这里有链接。

ImgPicker组件代码的Github链接