Question

我正在使用react-native-gifted-chat并有一个自定义发送按钮，但是如何使用我自己的发送按钮正确调用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中使用一个较大的对象，而这对于性能而言并不太有用

只需转到send.js的主要实现以响应本机有天赋的聊天

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

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

2 个答案: