自定义发送按钮并清除textInput react-native-gifted-chat

Question

我正在使用react-native-gifted-chat并有一个自定义的Send按钮，但是我如何使用自己的Send按钮正确调用onSend，然后如何清除inpuxText元素？

谢谢。

Answer 1

您可以定义renderSend函数：

renderSend = (sendProps) => {
        <TouchableOpacity>
          <Image source={require('path/to/your/button/icon')} />
        </TouchableOpacity>
      );
  }

<GiftedChat renderSend={this.renderSend} />

更多信息请点击此处：https://github.com/FaridSafi/react-native-gifted-chat/issues/480

至于清除文本输入，也许你可以使用redux，并通过返回一个空的textInput来清除textInput？

例如：

case MESSAGE_SENT:
      return { ...state, error: action.payload, loading: false, textInput: '' };

Answer 2

所以我花了一段时间，但我最终得到了它

 <GiftedChat
          messages={messages}
          textInputStyle={styles.textInput}
          onSend={messages => onSend(messages)}
          multiline
          user={{
            _id: 1,
          }}
          renderSend={(props)=>{
            const {text,messageIdGenerator,user, onSend} = props
            return(
              <TouchableOpacity onPress= {
                ()=>{
                   if (text && onSend) {
                       onSend({ text: text.trim(), user:user,_id:messageIdGenerator()}, true);
                 }
                 }
                } style={styles.sendButton}>
                   <Send/>
            </TouchableOpacity>
            )}} 
    />

至于使用redux来清除它是有点多余的，而且你必须在redux中处理一个大对象，这不会对性能有太大的影响

只需转到react原生天才聊天中send.js的主要实现

https://www.github.com/FaridSafi/react-native-gifted-chat/tree/master/src%2FSend.tsx