React Native下载JavaScript Bundle时如何替代白屏展示加载页

完全可以实现，这是React Native应用优化首屏体验的常规操作，核心思路是在原生层优先渲染静态加载页，覆盖JS Bundle下载、解析、执行的空白窗口期，等RN侧根组件挂载完成后再关闭原生加载页即可。

iOS端 #

• 先在Xcode中配置项目启动页，可直接编辑LaunchScreen.storyboard拖拽生成你需要的加载页UI，比如品牌Logo、加载提示文案，该启动页会在App启动后第一时间渲染，刚好覆盖JS Bundle加载的空白期
• 可引入react-native-splash-screen库简化原生逻辑开发，完成原生依赖配置后，在AppDelegate.m的didFinishLaunchingWithOptions方法中加入代码[RNSplashScreen show];
• 在RN项目的根组件挂载完成后（类组件用componentDidMount、函数组件用useEffect空依赖钩子），调用RNSplashScreen.hide()关闭加载页即可

Android端 #

• 先创建启动页专属的drawable布局文件，自定义加载页的UI样式
• 在AndroidManifest.xml中把启动Activity的主题设置为你自定义的加载页主题，App启动后会直接加载该原生主题UI，覆盖JS Bundle加载的空白期
• 完成react-native-splash-screen的原生配置后，在MainActivity.java的onCreate方法中加入代码RNSplashScreen.show(this);
• 和iOS端逻辑一致，在RN根组件加载完成后调用RNSplashScreen.hide()关闭加载页即可

• 如果不想引入第三方库，也可以自行在原生层实现加载页的显示、隐藏逻辑，核心逻辑和上述方案完全一致
• 若你的JS Bundle是远端动态下发、未内置在App包内，可额外在原生层监听JS Bundle的下载进度，同步更新到原生加载页上，进一步优化用户体验
• 加载页尽量使用轻量的原生元素实现，避免复杂动效，否则反而会拖慢App启动速度
• 注意适配不同尺寸的手机屏幕，避免加载页UI出现拉伸、变形问题

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