React Native Android键盘弹出时Header被顶起，需保持Header可见

当前基于React Navigation的Stack Navigator开发聊天页面，页面Header标题为“Rozmowy z fizjoterapeutą”。打开输入框弹出键盘时，Header被顶至顶部无法看见。已在Android配置中设置android:windowSoftInputMode="adjustPan"，需求是键盘弹出时Header始终保持可见。

补充说明：查看BottomTabNavigationOptions时，无法看到输入组件。

相关代码 #

Stack.Navigator配置 #

<Stack.Navigator
  screenOptions={{
    headerTintColor: '#2D31A6',
    headerTitleAlign: 'center',
    headerTitleStyle: {
      fontSize: 24,
      fontWeight: 'bold',
    },
    headerShadowVisible: false,
  }}
>
  <Stack.Screen
        name="Chat"
        component={Chat}
        options={() => ({
          title: 'Rozmowy z fizjoterapeutą',
          contentStyle: {
            backgroundColor: '#FFFFFF',
          },
        })}
      />
</Stack.Navigator>

Chat组件代码 #

<GiftedChat
  renderSend={renderSend}
  renderMessageVideo={renderMessageVideo}
  renderChatFooter={renderChatFooter}
  renderCustomView={renderCustomView}
  messages={messages}
  alwaysShowSend
  onSend={(newMessages) => {
    //@ts-ignore
    onSend(newMessages);
  }}
  user={{
    _id: currentUser,
  }}
/>

解决方案 #

1. 修改Android软键盘模式
   将android:windowSoftInputMode="adjustPan"替换为android:windowSoftInputMode="adjustResize"。adjustPan会将整个页面上移，而adjustResize会让页面重新计算可用空间，自动调整布局，确保Header留在视野内。

2. 确保GiftedChat布局自适应
   给Chat组件的外层容器设置flex:1，让GiftedChat在剩余空间内填充，避免键盘弹出时布局挤压导致Header被顶出。示例：

   const Chat = () => {
     return (
       <View style={{flex:1}}>
         <GiftedChat
           // 现有配置
         />
       </View>
     )
   }
   

3. 优化BottomTabNavigator配置
   如果聊天页面嵌套在BottomTabNavigator中，给TabNavigator添加tabBarHideOnKeyboard: true配置，让底部导航栏在键盘弹出时自动隐藏，释放空间避免布局冲突：

   <BottomTab.Navigator
     screenOptions={{
       tabBarHideOnKeyboard: true,
       // 其他配置
     }}
   >
     // 页面配置
   </BottomTab.Navigator>
   

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