react-native-gifted-chat 如何按回車發送

Question

如何讓移動鍵盤上的返回按鈕發送消息而不是創建新行？ 我嘗試在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 的行為可能有所不同。