React Native Gifted Chat发送消息后保持输入框焦点问题求助

我仔细看了你的代码，问题主要出在输入框配置、发送逻辑写法，还有一处属性拼写错误上，咱们一步步来修复：

一、先修正Chat.js里的属性拼写错误 #

你在GiftedChat组件里写了isKeyboardInternallyHandled-={false}，这里多了个减号，改成正确的写法：

<GiftedChat
  // ... 其他原有属性
  isKeyboardInternallyHandled={false} // 修正拼写错误
  // ... 其他原有属性
/>

二、修改ChatInputBox.js的核心逻辑 #

这部分是问题的关键，咱们调整输入框配置和发送触发逻辑：

1. 关闭输入框提交时失焦
   把Input组件的blurOnSubmit={true}改成blurOnSubmit={false}，这样提交时不会自动失焦。

2. 修复发送按钮的触发逻辑
   原来的onPress={() => send(message) && focusInput}有两个问题：一是send函数没有返回值，&&后面的focusInput不会执行；二是调用方式不对，要明确执行两个操作。同时，send函数要适配GiftedChat的onSend参数要求（需要传入消息数组）。

3. 优化状态更新和焦点控制
   用useCallback包裹send和focusInput函数，避免不必要的重渲染，确保发送后能稳定聚焦。

修改后的ChatInputBox.js完整代码：

import React, { useState, useRef, useEffect, useCallback } from 'react'
import { View, Text, Item, Input } from 'native-base'
import { Platform, StyleSheet, TouchableOpacity } from "react-native";

// 注意：如果userData是从父组件传入的，记得在props里添加
const ChatInputBox = ({ onSend, timeDiffSeconds, status, userData }) => { 
  const [message, setMessage] = useState(''); 
  const inputEl = useRef(); 

  const focusInput = useCallback(() => {
    if (inputEl.current) {
      inputEl.current.focus();
    }
  }, []);

  const send = useCallback(() => {
    if (message.trim() === '') return;
    // 构造GiftedChat需要的消息格式：数组，每个消息包含text、createdAt、user
    const newMessage = [{
      text: message,
      createdAt: new Date(),
      user: { _id: userData._id }
    }];
    onSend(newMessage);
    setMessage('');
    // 加个小延时确保状态更新完成后再聚焦
    setTimeout(() => focusInput(), 10); 
  }, [message, onSend, userData, focusInput]);

  // 组件挂载时自动聚焦（可选，根据你的需求保留）
  useEffect(() => {
    focusInput();
  }, [focusInput]);

  return (
    <View style={styles.container} opacity={message !== '' ? .8 : .5}>
      <Item rounded style={styles.inputBox}>
        <Input 
          placeholder='Type a message' 
          multiline={true} 
          style={{ textAlignVertical: 'top' }} 
          autoFocus={true} 
          onChangeText={(text) => setMessage(text)} 
          keyboardAppearance={'light'} 
          value={message} 
          ref={inputEl} 
          blurOnSubmit={false} // 关键：关闭提交时自动失焦
        />
        <TouchableOpacity 
          style={styles.sendText} 
          onPress={() => {
            send();
            // 发送后强制触发聚焦
            focusInput();
          }} 
        >
          <Text style={message !== '' ? { color: '#FFFFFF', fontWeight: 'bold', padding: 5 } : {}}>
            send
          </Text>
        </TouchableOpacity>
      </Item>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
    paddingVertical: 5,
  },
  inputBox: {
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  sendText: {
    justifyContent: 'flex-end',
    marginLeft: 5,
  }
});

export default ChatInputBox

三、关键修改点总结 #

• 修正GiftedChat的属性拼写错误，确保键盘内部处理逻辑关闭
• 输入框设置blurOnSubmit={false}，阻止提交时自动失焦
• 发送函数适配GiftedChat的消息格式，发送后手动调用聚焦方法，加小延时确保状态更新完成
• 用useCallback包裹核心函数，避免组件重渲染导致的焦点丢失

这样修改后，点击发送按钮后输入框会保持焦点，键盘也不会消失啦。

内容的提问来源于stack exchange，提问作者jiksp