自定义发送按钮和清除文本式反应式赠品

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/reaect-native-gifted-chat/issues/480

为清除文本输入，也许您可以使用redux并通过返回空白文本input来清除文本输入？

例如：

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/master/src/send.tsx

Answer 3

更好的解决方案

import {giftedchat，send}从'react-native-gifted-chat'

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