react-native-gifted-chat 如何按返回发送

Question

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

Answer 1

您需要实现自己的 ChatComposer 并在其中的 textInputProps 中传递 onSubmitEditing Prop 。为了防止键盘关闭，您还需要将 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 的行为可能有所不同。