React Native如何为折叠屏设备开发固定显示比例应用

完全可以实现，Instagram在折叠屏上的固定非全屏显示效果不需要特殊权限，也不会触发应用商店拒审，核心通过「RN层约束根容器比例+原生端关闭系统强制拉伸」两层配置即可达成。

不要给根容器设置flex:1做全屏铺满，而是通过官方提供的useWindowDimensions Hook实时获取屏幕尺寸，计算出符合你预期固定比例的容器大小，居中放置，多余区域填充黑色即可，和Instagram效果一致。

• 固定比例建议和常规直板手机对齐，Instagram用的是9:19.5的竖屏比例，你可以根据自己的产品需求调整
• 所有页面、全局弹窗、组件都要渲染在固定比例容器内部，避免跑到周边留白区域
• 参考实现代码：

import { View, useWindowDimensions, StyleSheet } from 'react-native';

// 自定义固定显示宽高比
const FIXED_ASPECT_RATIO = 9 / 19.5;

export default function AppRoot({ children }) {
  const { width: screenW, height: screenH } = useWindowDimensions();

  // 计算当前屏幕下可容纳的最大符合比例的容器尺寸
  let containerW, containerH;
  if (screenW / screenH > FIXED_ASPECT_RATIO) {
    containerH = screenH;
    containerW = containerH * FIXED_ASPECT_RATIO;
  } else {
    containerW = screenW;
    containerH = containerW / FIXED_ASPECT_RATIO;
  }

  return (
    <View style={styles.rootWrap}>
      <View style={{ width: containerW, height: containerH, overflow: 'hidden' }}>
        {children}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  rootWrap: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000', // 周边留白区域填充黑色
  }
});

这部分配置是为了关闭安卓系统对折叠屏应用的默认强制拉伸逻辑，否则RN层的尺寸约束会失效。

Android 端配置 #

1. 打开android/app/src/main/AndroidManifest.xml，在主<activity>标签下添加如下属性和元数据：

<activity
  android:name=".MainActivity"
  android:resizeableActivity="true"
  android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"
  ...其他原有属性>
  <meta-data
    android:name="android.max_aspect"
    android:value="2.1" />
</activity>

注意不要把resizeableActivity设为false，否则折叠屏开合时会强制重启应用，体验很差；设为true配合configChanges声明，会让应用主动接收尺寸变化回调，配合RN的useWindowDimensions自动调整容器大小，无重启。

2. 如果使用React Native 0.70+版本，打开android/app/src/main/java/你的包名/MainActivity.kt（或者对应Java文件），在onCreate方法中添加如下配置，禁用系统兼容拉伸：

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  window.setDecorFitsSystemWindows(true)
}

iOS 端预配置 #

目前iOS暂无量产折叠屏设备，你可以提前在ios/项目名/Info.plist中添加如下配置，避免后续设备发布后系统强制拉伸应用：

<key>UIRequiresFullScreen</key>
<false/>
<key>UISupportedInterfaceOrientations</key>
<array>
  <string>UIInterfaceOrientationPortrait</string>
</array>

• 该方案完全符合Google Play、App Store、国内各大安卓应用商店的上架规则，Instagram、早期版本的WhatsApp都是采用该方案做折叠屏适配，不会被拒审
• 测试时直接用折叠屏真机开合验证即可，useWindowDimensions会自动监听屏幕尺寸变化，实时调整容器大小，不会出现布局错乱
• 如果后续需要做折叠屏全屏适配，只需要删掉根容器的尺寸约束，移除对应原生配置即可，改造成本极低

内容的提问来源于stack exchange，提问作者Farah Shahnaz Imami