React Native键盘弹出时TextInput被遮挡的问题求助

问题情况 #

开发React Native聊天界面时，底部的TextInput组件在键盘弹出时被遮挡，已使用KeyboardAvoidingView但未生效，相关代码及界面截图如下：

代码片段 #

const showFooter = () => {
  return (
    <View style={s.footerContainer}>
      <Pressable style={s.btnInput}>
        <FontAwesome name="photo" size={22} color="#eee" />
      </Pressable>

      <TextInput 
        onContentSizeChange={(e) => {
          const { height } = e.nativeEvent.contentSize;
          height > 45 && height < 100 && setHH(height);
          height === 43 && setHH(45);
        }}
        value={input} 
        onChangeText={e => handleChangeInput(e)} 
        multiline 
        placeholder='Gebe eine Textnachricht ein...'
        style={[s.footerInput, { height: hh }]} 
      />
      <Pressable style={s.btnInput}>
        <AntDesign name="camerao" size={26} color="#eee" />
      </Pressable>
      <Pressable style={[s.btnInput, s.marginMinus]}>
        <Fontisto name="paper-plane" size={22} style={s.paper} color="#eee" />
      </Pressable>
  </View>
  )
};
return (
  <KeyboardAvoidingView behavior='padding' style={{flex: 1}}>

      <FlashList
        data={message}
        keyExtractor={i => i.id.toString()}
        renderItem={rowRenderer}
        extraData={message}
        estimatedItemSize={200}
        inverted
      />

  { /* INPUT */ }
    <View style={[s.footer]}>
      { showFooter() }
    </View>

    </KeyboardAvoidingView>
)
};

const s = StyleSheet.create({
  container: {
    flex: 1,
  //  backgroundColor: '#eee'
  },
  footer: {
    paddingHorizontal: 4,
    backgroundColor: '#fff',
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  },
  footerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 5,
    width: widthScreen - 8,
    borderWidth: 1,
    borderRadius: 20,
    maxHeight: 100,
    borderColor: '#eee',
  },
  footerInput: { 
    width: widthScreen - 152,
    padding: 12,
    paddingLeft: 0,
    textAlignVertical: 'top',
  },
  btnInput: {
    height: 38,
    width: 38,
    backgroundColor: '#C71FF7',
    borderRadius: 200,
    alignItems: 'center',
    justifyContent: 'center'
  },
})

界面截图 #

• 键盘弹出前：
• 键盘弹出后：

解决步骤 #

1. 给KeyboardAvoidingView添加平台适配 #

KeyboardAvoidingView的behavior属性在iOS和Android上表现差异较大，直接使用padding在Android上可能无效，需针对性配置，同时添加keyboardVerticalOffset适配导航栏高度：

import { Platform } from 'react-native';

// ...

return (
  <KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0} // 导航栏高度通常为64，可根据项目调整
    style={{flex: 1}}
  >
    {/* FlashList 和 footer 内容保持不变 */}
  </KeyboardAvoidingView>
)

2. 将Footer设置为绝对定位 #

让Footer固定在屏幕底部，确保KeyboardAvoidingView计算键盘高度时能正确将其向上推送：

footer: {
  paddingHorizontal: 4,
  backgroundColor: '#fff',
  width: '100%',
  alignItems: 'center',
  justifyContent: 'center',
  position: 'absolute',
  bottom: 0,
  left: 0,
  right: 0,
}

3. 给FlashList添加flex:1属性 #

确保消息列表占据屏幕剩余空间，避免与Footer布局冲突：

<FlashList
  data={message}
  keyExtractor={i => i.id.toString()}
  renderItem={rowRenderer}
  extraData={message}
  estimatedItemSize={200}
  inverted
  style={{flex: 1}} // 添加该行
/>

4. 手动监听键盘事件（备选方案） #

若上述方法无效，可手动监听键盘弹出/收起事件，动态调整Footer位置：

import { Keyboard, Dimensions } from 'react-native';
const { height: screenHeight } = Dimensions.get('window');
const [keyboardHeight, setKeyboardHeight] = useState(0);

useEffect(() => {
  const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
    setKeyboardHeight(e.endCoordinates.height);
  });
  const hideListener = Keyboard.addListener('keyboardDidHide', () => {
    setKeyboardHeight(0);
  });

  return () => {
    showListener.remove();
    hideListener.remove();
  };
}, []);

// 动态调整Footer的bottom值
<View style={[s.footer, { bottom: keyboardHeight }]}>
  { showFooter() }
</View>

总结 #

优先尝试前三种方案，尤其是KeyboardAvoidingView的平台适配，这是解决键盘遮挡问题最常用的方法。若仍未解决，再考虑手动监听键盘事件的备选方案。

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