react-native-gifted-chat 如何在按下 return 时发送

Question

如何让移动键盘上的 return 按钮发送消息而不是创建新行？我尝试在 textInputProps 中使用 onSubmitEditing 但无法正常工作。

Answer 1

您需要实现自己的 ChatComposer 并在 textInputProps 中传递 onSubmitEditing 道具。为了防止键盘关闭，您还需要将 blurOnSubmit 设置为 false。

const [messages, setMessages] = useState([])


const onSend = useCallback((messages = []) => {
    setMessages((previousMessages) => GiftedChat.append(previousMessages, messages))
}, [])

const ChatComposer = (
    props: ComposerProps & {
      onSend: SendProps<IMessage>["onSend"]
      text: SendProps<IMessage>["text"]
    }
) => {
    return (
      <Composer
        {...props}
        textInputProps={{
          ...props.textInputProps,
          blurOnSubmit: false,
          multiline: false,
          onSubmitEditing: () => {
            if (props.text && props.onSend) {
              props.onSend({ text: props.text.trim() }, true)
            }
          },
        }}
      />
    )
 }

return (
    <GiftedChat messages={messages} onSend={onSend} renderComposer={ChatComposer} />
  )

如果您想从右侧的文本输入字段中删除默认的 send 按钮，您需要传递一个自定义 renderSend 按钮，该按钮可以为空，例如

renderSend={() => {}}

注意，我仅在 iOS 上测试了以上所有内容。 Android 可能会有所不同。

react-native-gifted-chat 如何在按下 return 时发送

react-native-gifted-chat How to send on pressing return

react-native

chat

react-native-gifted-chat