Navigation Stack下KeyboardAvoidingView无法正常上推内容问题

1. 恢复导航栈的键盘默认处理 #

你在导航器中设置了keyboardHandlingEnabled: false，这会关闭导航栈自带的键盘适配逻辑，和自定义的KeyboardAvoidingView产生冲突。直接移除该配置：

<Stack.Navigator> {/* 移除screenOptions中的keyboardHandlingEnabled: false */}
  {isLoggedIn ? (
    <Stack.Group>
      <Stack.Screen name="HomeNav" component={HomeNav} />
    </Stack.Group>
  ) : (
    <Stack.Group screenOptions={{ headerShown: false, headerStatusBarHeight: 0 }}>
      <Stack.Screen name="Login" component={Login} />
    </Stack.Group>
  )}
</Stack.Navigator>

2. 调整KeyboardAvoidingView的结构与行为 #

当前将垂直居中的paddingTop直接绑定在KeyboardAvoidingView上，键盘弹出时组件高度变化会挤压内部元素。需将布局padding转移到内部容器，让KeyboardAvoidingView仅负责位置调整：

// 先导入View组件
import {
    StyleSheet,
    KeyboardAvoidingView,
    Platform,
    Text,
    StatusBar,
    View
} from 'react-native';

function Login( props ) {
    const { hp } = useContext(AppContext);
    const STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;

    return (
        <KeyboardAvoidingView
            style={styles.loginView}
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'} // 按平台选择适配行为
            keyboardVerticalOffset={STATUSBAR_HEIGHT} // 仅适配状态栏高度，无需固定值
        >
            <SafeAreaView style={{ flex: 1 }} >
                {/* 用内部容器实现垂直居中padding，避免KeyboardAvoidingView挤压 */}
                <View style={{ flex: 1, paddingTop: hp(25) - STATUSBAR_HEIGHT, paddingHorizontal: hp(4) }}>
                    <Text style={[
                        styles.title, 
                        { fontSize: hp(10, true) / 1.25, marginBottom: hp(2) } ]}
                    > 
                        Login 
                    </Text>
                    <Text style={[styles.subtitle, { fontSize: hp(5, true) / 1.25, marginBottom: hp(2) } ]}>
                        Enter your credentials
                    </Text>
                    <LoginForm />
                </View>
            </SafeAreaView>
        </KeyboardAvoidingView>
    )
}

const styles = StyleSheet.create({
    loginView: {
        flex: 1,
        backgroundColor: 'powderblue'
    },
    title: {
        fontWeight: '500',
        alignSelf: 'center',
    },
    subtitle: {
        alignSelf: 'center',
    }
});

3. 优化hp函数的动态尺寸适配 #

确保hp函数使用实时屏幕尺寸，避免固定值导致的适配偏差，可结合useWindowDimensions钩子实现：

// 在GlobalContext中修改
import { useWindowDimensions, PixelRatio, StatusBar } from 'react-native';

// 获取实时屏幕尺寸
const { height, width } = useWindowDimensions();
const STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;

function hp( heightPercent, text ) {
    const elemHeight = typeof heightPercent === 'number' ? heightPercent : parseFloat(heightPercent);
    let tempheight = height;

    if ( text === true && orientation === 'PORTRAIT' ) {
      tempheight = width;
    }

    return PixelRatio.roundToNearestPixel((tempheight - STATUSBAR_HEIGHT) * elemHeight / 100);
}

4. 给LoginForm添加滚动容器 #

在LoginForm中包裹ScrollView，确保键盘弹出时内容可滚动，避免局部元素被遮挡或变形：

// LoginForm示例代码
import { ScrollView, TextInput, StyleSheet } from 'react-native';

function LoginForm() {
    return (
        <ScrollView style={{ flex: 1 }} keyboardShouldPersistTaps="handled">
            <TextInput style={styles.input} placeholder="Email" />
            <TextInput style={styles.input} placeholder="Password" secureTextEntry />
            {/* 其他登录相关元素 */}
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    input: {
        height: 50,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 8,
        paddingHorizontal: 16,
        marginBottom: 16,
    }
});

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