加载一个react native 页面

最新推荐文章于 2024-08-04 13:48:15 发布

ohyeahhhh

最新推荐文章于 2024-08-04 13:48:15 发布

阅读量3.4k

点赞数 2

分类专栏： ReactNative学习笔记文章标签： url native react bridge ios

本文链接：https://blog.csdn.net/ohyeahhhh/article/details/54691638

版权

本文详细介绍了在原生iOS应用中加载React Native JS Bundle的步骤，包括获取资源路径、初始化RCTBridge，以及如何展示和使用JS Bundle中注册的组件。通过RCTBundleURLProvider获取bundle路径，并利用RCTBridge加载JS Bundle。此外，还讲解了如何在原生视图中展示JS定义的组件，使用RCTRootView作为容器。

摘要由CSDN通过智能技术生成

要在原生app中加载js视图，首先要先将js资源文件加载到app中，然后使用一个原生类的实例作为容器承接js定义的视图，最后将这个容器类实例添加到原生视图中。

加载JS Bundle

js代码是以JS Bundle的形式保存的，在app中使用js中定义的组件、方法之前，首先要加载JS Bundle。

1.获取JS bundle的资源路径

如果url已知那就跳过这一步，如果不知道url应该是怎样的可以看看。

JS bundle放在远端服务器上，当远端服务器没有开启的时候，使用本地预先打包好的JS bundle。（这个思路就只是为了调试，实际生产中一般不会用这个思路，应该是有更新的时候才会加载远端服务器上的js bundle，然后平时都是加载下载好的本地js bundle）

通过url来访问JS bundle资源。可以使用RCTBundleURLProvider类来获取JS bundle路径。它会检测远端服务器是否开启，如果开启，则返回远端服务器的资源路径，如果未开启则返回本地资源路径。

对于远端服务器上的bundle资源路径一般是这样的形式http://255.255.255.255:8081/index.ios.bundle?platform=ios&...
在上面的路径中，255.255.255.255部分为服务器主机地址，8081部分为端口，index.ios.bundle部分是JS bundle的名称，platform=ios&...部分是一些参数。R