React Native横屏启动屏适配多设备（iOS/安卓）方案咨询

安卓端适配 #

• 利用安卓原生资源目录规则，在android/app/src/main/res/下创建对应横屏像素密度的文件夹：drawable-land-hdpi、drawable-land-mdpi、drawable-land-xhdpi、drawable-land-xxhdpi、drawable-land-xxxhdpi
• 将对应分辨率的横屏启动图命名为splash.png放入对应文件夹，系统会自动根据设备屏幕密度和当前方向加载适配的图片
• 若需求是默认横屏启动，可在res/values/styles.xml里添加启动主题：

  <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowBackground">@drawable/splash</item>
      <item name="android:screenOrientation">landscape</item>
  </style>
  

• 最后在AndroidManifest.xml中给主Activity指定这个启动主题，进入应用后再切换回正常主题即可

iOS端适配（解决Xcode配置痛点） #

推荐替代包 #

放弃react-native-splash-screen，试试这两个支持多设备横屏适配的包：

• react-native-bootsplash：目前最省心的方案，支持自动生成全平台适配资源，完美兼容iPhone 15 Pro Max、iPad Pro 11英寸等设备
  • 操作步骤：
    1. 安装：npm install react-native-bootsplash
    2. 生成适配资源：准备一张1024x1024的启动图原图，运行命令：

       npx react-native generate-bootsplash assets/your-splash.png --background=#FFFFFF --orientation=landscape
       

       工具会自动生成所有iOS、安卓需要的横屏/竖屏适配图
    3. Xcode配置：
       • 把生成的BootSplash.storyboard拖进Xcode项目
       • 在Info.plist里设置UILaunchStoryboardName为BootSplash
       • 检查项目横屏权限：在Xcode项目设置的General -> Deployment Info里，勾选对应设备的横屏方向（iPad需全选相关方向）
• react-native-splash-screen-ng：原react-native-splash-screen的维护分支，修复了缩放适配问题，支持横屏启动屏的自适应调整

手动Xcode配置（无第三方包） #

如果不想依赖包，手动配置也可行：

1. 打开Xcode项目，进入Assets.xcassets，新建Launch Screen资源组
2. 切换到横屏视图，添加对应设备的横屏启动图：
   • iPhone 15 Pro Max：2796x1290分辨率
   • iPad Pro 11英寸：2388x1668分辨率
3. 给启动图添加Auto Layout约束，设置为铺满整个屏幕，确保在不同设备上自动缩放适配
4. 在Info.plist里配置UILaunchScreen，指定使用创建的启动屏资源

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