iOS原生项目集成React Native(不使用pods)

react

iOS原生项目集成RN步骤(确保已经安装React Native环境):

1,使用Xcode创建项目,RNProject

在根目录下创建ios目录,将xcode创建的工程等相关文件移到ios目录下。

2,在项目根目录下添加package.json文件,如下图所示:


3,安装rn模块:

打开终端,进入项目根目录,执行命令npm install。完成后可以看到项目中多了node_modules目录和package-lock.json文件

4,创建js入口文件index.js,页面入口文件App.js

编辑index文件,如下图所示:


编辑页面文件App.js:

这里我们在页面上只显示一行文本:<View style={{backgroundColor:'red'}}><Text>RN TEST</Text></View>

5,手动添加react native框架:

打开xcode工程文件,新建一个Libraries的Group。打开node_modules目录,首先将react-native/React目录下的React.xcodeproj文件拖拽至xcode的Libraries中,然后再将react-native/Libraries目录中的相关xcode工程文件拖拽至Libraries中,最后效果如下:


6,配置Edit Scheme

打开xcode工程,打开Edit Scheme,左边栏选择Build,添加React,同时取消BuildOptions中的Parallelize Build选项。


经过处理过程,大体完成了rn框架的添加,下面需要进行一些环境的配置。

1,xcode工程中plist添加NSAppTransportSecurity配置,效果如下:

2,xcode工程Build Settiing中的 Other Linker Flags设置为-ObjC(非常重要,否则运行会崩溃)

3,检查工程中React工程的Build Setting中的HeaderSearchPath,需要配置成如下效果:


4,xcode Build Setting中的Build Active Architecture Only配置,将Debug设置为Yes,Release设置为No。

5,在工程中添加相关的framework,效果如下:


最后,添加react native应用,这个随意,可以在工程中的ViewController中定义一个button,点击button可以present一个RN页面,方法如下:


至此,大功告成,xcode中点击运行,终端会自动启动,然后点击button,RN页面弹出。OK!!!

ps:如果在编译过程中出现一些React工程下某些文件找不到,可以打开Xcode中React的Build Setting,检查header search路径是否正确。如果在RN启动时出现崩溃同时提示devSetting方法找不到时,这个问题可能是Build Settiing中的 Other Linker Flags没有设置为-ObjC引起的。

以上纯属个人经验,如有错误欢迎指正,谢谢!!!

以上是 iOS原生项目集成React Native(不使用pods) 的全部内容, 来源链接: utcz.com/z/383166.html

回到顶部