如何使Expo构建的React-Native应用兼容iOS 12-17及旧版安卓？

1. 配置项目最低系统版本 #

首先在项目的app.json或app.config.js中明确指定最低兼容版本：

{
  "expo": {
    "ios": {
      "deploymentTarget": "12.0"
    },
    "android": {
      "minSdkVersion": 21, // 对应Android 5.0，覆盖绝大多数旧安卓设备
      "compileSdkVersion": 33,
      "targetSdkVersion": 33
    }
  }
}

如果使用EAS Build，需同步在eas.json的构建配置中确认iOS的deploymentTarget与上述一致，避免构建时覆盖设置。

2. 匹配兼容的Expo SDK与依赖版本 #

• Expo SDK选型：Expo SDK 47及以下版本支持iOS 12，SDK 48及以上最低要求iOS 13。如果必须兼容iOS 12，需锁定SDK 47或更早版本。
• 第三方依赖降级：检查所有npm包的兼容性，避免引入仅支持高版本系统的库。例如：
  • React Native版本需与SDK匹配（SDK 47对应RN 0.70.x，支持iOS 12）
  • 避免使用依赖iOS 13+ API的库（如某些新的权限模块、媒体库）
  • 用npm ls <package-name>查看依赖的最低系统要求，必要时降级到兼容版本。

3. 规避系统不支持的API与特性 #

• iOS 12限制：
  • 不支持WebP图片格式，统一使用PNG/JPG，或通过代码判断系统版本切换格式：

    import { Platform } from 'react-native';
    const imageUri = Platform.Version <= 12 ? './image.jpg' : './image.webp';
    

  • 避免使用iOS 13+的原生API（如UISceneDelegate、深色模式的部分API），如需适配需做版本判断。
• 安卓旧设备限制：
  • 避免使用Android 6.0+的动态权限API不加兼容处理，需添加权限申请的降级逻辑。
  • minSdkVersion 21及以上可正常启用Hermes引擎提升性能，低于21则禁用。

4. UI与性能适配 #

• 布局兼容：iOS 12对CSS Grid支持有限，优先使用Flexbox布局；避免使用新的RN组件属性（如某些Pressable的高级特性），改用TouchableOpacity等兼容组件。
• 性能优化：旧设备内存有限，需：
  • 用FlatList替代ScrollView渲染长列表
  • 压缩图片资源，避免加载大尺寸图片
  • 减少不必要的动画效果，或在旧设备上禁用动画

5. 构建与测试 #

• 禁用Expo Go：Expo Go不支持iOS 12，必须构建自定义开发客户端或生产包进行测试。使用eas build生成对应系统的安装包。
• 真机测试：务必用iOS 12真机（或Xcode模拟器的iOS 12版本）测试，安卓测试覆盖目标minSdkVersion的设备，排查兼容性问题。

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