iOS原生项目集成React Native(不使用pods)
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