自定义发送按钮和明文输入 react-native-gifted-chat答案

【问题标题】：Custom Send button and clear textInput react-native-gifted-chat自定义发送按钮和明文输入 react-native-gifted-chat
【发布时间】：2018-05-25 08:02:39
【问题描述】：

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

谢谢。

【问题讨论】：

标签： react-native

【解决方案1】：

你可以定义renderSend函数：

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

<GiftedChat renderSend={this.renderSend} />

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

例如：

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

【讨论】：

【解决方案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 native天才聊天中的send.js的主要实现

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

【讨论】：

【解决方案3】：

更好的解决方案

从 'react-native-gifted-chat' 导入 { GiftedChat, Send }

  <Send {...props} >
                    <View style={{justifyContent: 'center', height: '100%', marginRight: 10}}>
                      <Icon
                          name='send'
                          type='ionicon'
                          size={24}
                          color={Colors.primaryColor}
                        />
                    </View>
                </Send>

【讨论】：