React Native Android端禁用键盘上推视图：softwareKeyboardLayoutMode: pan无效

我用Expo开发React Native应用，Android设备打开键盘时视图会被上推，想禁用这个行为。按Stack Overflow推荐在app.json里加了"softwareKeyboardLayoutMode": "pan"，重启了Expo、IDE和电脑，但键盘还是会上推视图。不过这个配置应该是被识别了——用开启enableOnAndroid={true}的KeyboardAwareScrollView时功能表现正常（但键盘还是上推视图），没加配置时表现异常。不过KeyboardAwareScrollView不是重点，只是用来测试配置是否生效。用普通View的时候问题依旧，求解决办法。

相关截图 #

使用普通View（非ScrollView/KeyboardAwareScrollView）且配置"softwareKeyboardLayoutMode": "pan"时：

app.json配置 #

{
  "expo": {
    "name": "smartphone-app",
    "slug": "smartphone-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "softwareKeyboardLayoutMode": "pan"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      "expo-localization"
    ]
  }
}

屏幕布局代码 #

return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.container}>
        <StatusBar style="auto" />
        <ImageBackground
          source={require("../assets/login_background.jpg")}
          resizeMode="cover"
          style={styles.backgroundImage}
        />
        <Animatable.View
          animation="fadeInUpBig"
          style={styles.body}
        >
          <View style={styles.body_main}>
            <LoginForm />
          </View>
        </Animatable.View>
      </View>
    </TouchableWithoutFeedback>
  );

样式代码 #

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-end",
  },
  body: {
    height: "100%",
    maxHeight: 680,
  },
  body_main: {
    flex: 1,
    backgroundColor: "#fff",
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    paddingHorizontal: 20,
    paddingVertical: 30,
  },
});

解决方案 #

• 检查Expo SDK版本：softwareKeyboardLayoutMode在Expo SDK 44+才支持，确认你的SDK版本是否达标，版本过低需升级。
• 添加原生窗口配置：在app.json的android字段里补充windowSoftInputMode配置，直接指定键盘行为，优先级更高：

  "android": {
    // 原有配置...
    "softwareKeyboardLayoutMode": "pan",
    "windowSoftInputMode": "adjustPan"
  }
  

• 固定容器高度：当前container使用justifyContent: "flex-end"，键盘弹出时易触发布局重排。可以添加固定高度避免这个问题：

  import { Dimensions } from 'react-native';
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: "flex-end",
      height: Dimensions.get('window').height,
    },
    // 其他样式...
  });
  

• 清除Expo缓存：执行expo r -c清除缓存后重启项目，避免旧配置残留。

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