React Native KeyboardAvoidingView失效求助：react-navigation栈导航全局配置无效

你当前代码的核心问题是**KeyboardAvoidingView没有正确包裹导航器**，标签嵌套错误导致它根本没作用到栈页面上。以下是修正方案：

修正后的代码 #

import { Platform, KeyboardAvoidingView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <SafeAreaProvider>
        {/* KeyboardAvoidingView 必须包裹整个 StackNavigator */}
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          // 适配安全区域/状态栏高度，避免键盘偏移不准
          keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
        >
          <Stack.Navigator>
            <Stack.Screen name="Page1" component={Page1} />
            <Stack.Screen name="Page2" component={Page2} />
          </Stack.Navigator>
        </KeyboardAvoidingView>
      </SafeAreaProvider>
    </NavigationContainer>
  );
}

关键说明 #

• 正确嵌套：把Stack.Navigator完全放在KeyboardAvoidingView内部，这样所有栈页面都会继承它的键盘适配逻辑。
• keyboardVerticalOffset：iOS上默认要加上状态栏+导航栏的高度（一般64），Android根据实际情况调整，解决键盘弹出时页面偏移过多/不足的问题。
• 额外适配：如果页面内有ScrollView，需要给ScrollView加上contentContainerStyle={{ flexGrow: 1 }}，确保页面能随键盘动态调整。

备选调试方案 #

如果还是不生效，可以尝试：

• iOS端把behavior改成'position'，部分场景下兼容性更好；
• 检查页面内是否有自定义的SafeAreaView，避免和外层的SafeAreaProvider冲突；
• 确保所有页面的根容器都设置了flex:1，让KeyboardAvoidingView能正确计算布局。

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