Gifted Chat中键盘与输入框间底部空白消除方案求助

问题现象 #

键盘弹出时输入框与键盘之间存在空白，bottomOffset属性无效；键盘关闭时显示正常，设置safeAreaView=false也无法解决。

相关截图 #

用户代码 #

<GiftedChat
    messages={messages}
    user={{
      _id: currentUser.uid,
    }}
    isTyping={true}
    renderBubble={renderBubble}
    renderInputToolbar={renderInputToolbar}
    renderSend={renderSend}
    onSend={onSend}
  />

const renderInputToolbar = props => {
  return <InputToolbar
    {...props}
    containerStyle = {{
      marginLeft: 15,
      marginRight: 15,
      backgroundColor: colors.white,
      alignContent: "center",
      justifyContent: "center",
      borderWidth: 0,
      paddingTop: 6,
      borderRadius: 30,
      borderTopColor: "transparent",
    }}
  />
};

解决思路 #

• 清除InputToolbar的底部间距
  自定义的InputToolbar当前仅设置了paddingTop:6，尝试在containerStyle中添加paddingBottom: 0和marginBottom: 0，强制清除底部可能存在的默认间距；同时检查内部TextInput组件是否自带额外的margin/padding。

• 动态计算键盘高度设置bottomOffset
  利用React Native的Keyboard模块监听键盘弹出事件，实时获取键盘高度并设置bottomOffset，如果设备有底部安全区，需结合react-native-safe-area-context减去安全区高度：

  import { Keyboard } from 'react-native';
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
  import { useState, useEffect } from 'react';
  
  const YourChatComponent = () => {
    const [keyboardHeight, setKeyboardHeight] = useState(0);
    const insets = useSafeAreaInsets();
  
    useEffect(() => {
      const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
        setKeyboardHeight(e.endCoordinates.height);
      });
      const hideListener = Keyboard.addListener('keyboardDidHide', () => {
        setKeyboardHeight(0);
      });
  
      return () => {
        showListener.remove();
        hideListener.remove();
      };
    }, []);
  
    return (
      <GiftedChat
        ...
        bottomOffset={keyboardHeight - insets.bottom}
      />
    );
  };
  

• 调整GiftedChat及父容器样式
  给GiftedChat添加containerStyle={{ paddingBottom: 0, marginBottom: 0 }}，同时检查父容器（如ScrollView、View）是否设置了不必要的底部padding/margin，避免继承样式导致间距。

• 配置Android窗口软键盘模式
  在AndroidManifest.xml的对应activity中添加android:windowSoftInputMode="adjustResize"，确保窗口随键盘弹出自动调整大小：

  <activity
    android:name=".MainActivity"
    ...
    android:windowSoftInputMode="adjustResize">
  

• 排查自定义InputToolbar的影响
  暂时去掉自定义的renderInputToolbar，使用默认组件测试空白是否消失，以此确认是否是自定义样式导致的问题；如果是，逐步排查containerStyle中的属性，比如尝试移除borderRadius、alignContent等属性测试。

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