React Native聊天应用rn-emoji-keyboard遮挡输入框问题求助

1. 监听表情键盘状态，获取对应高度 #

rn-emoji-keyboard一般会提供onOpen和onClose回调，部分版本还支持返回键盘高度参数。如果组件未自带高度返回，可手动预设一个合理高度（比如250，根据实际组件调整），或者通过LayoutAnimation动态获取：

• 在onOpen回调中，更新状态里的emojiKeyboardHeight为预设值或实时获取的高度；
• 在onClose回调中将高度重置为0。

2. 用ScrollView包裹界面，动态调整内容偏移 #

将消息列表+输入栏整体放入ScrollView，根据表情键盘高度动态设置contentInset和scrollIndicatorInsets，让内容自动上移避开遮挡：

<ScrollView
  contentContainerStyle={{ flexGrow: 1 }}
  contentInset={{ bottom: emojiKeyboardHeight }}
  scrollIndicatorInsets={{ bottom: emojiKeyboardHeight }}
>
  {/* 消息列表区域 */}
  <View style={{ flex: 1 }}>{/* 渲染消息 */}</View>
  {/* 输入栏 */}
  <InputBarComponent />
</ScrollView>

3. 结合KeyboardAvoidingView适配双键盘 #

默认KeyboardAvoidingView只监听系统键盘，可通过维护统一的keyboardHeight状态兼容两种键盘：

• 系统键盘弹出时，用Keyboard.addListener('keyboardDidShow', e => setKeyboardHeight(e.endCoordinates.height))获取高度；
• 表情键盘弹出时，直接将keyboardHeight设为预设的表情键盘高度；
• 动态调整输入栏的marginBottom：

<KeyboardAvoidingView 
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'} 
  style={{ flex: 1 }}
>
  {/* 消息列表 */}
  <View style={{ flex: 1 }}>{/* 渲染消息 */}</View>
  {/* 输入栏 */}
  <View style={{ marginBottom: keyboardHeight }}>
    <InputBarComponent />
  </View>
</KeyboardAvoidingView>

4. 加入平滑动画优化交互 #

用Animated实现输入栏上移的过渡效果，避免生硬跳转：

const animatedBottom = useRef(new Animated.Value(0)).current;

// 打开表情键盘时触发动画
Animated.timing(animatedBottom, {
  toValue: emojiKeyboardHeight,
  duration: 200,
  useNativeDriver: false,
}).start();

// 输入栏使用动画值
<Animated.View style={{ bottom: animatedBottom }}>
  <InputBarComponent />
</Animated.View>

额外注意 #

• 确保rn-emoji-keyboard的定位为position: absolute并底部对齐屏幕，避免占用布局空间挤压内容；
• Android端需在AndroidManifest.xml中设置windowSoftInputMode="adjustResize"，保证系统键盘适配正常。

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