React Native 向iOS项目中添加React Native支持
之前的学习 为React Native 应用扩展原生功能,还是以 React Native 为开发主导,然而很多项目已经使用了原生开发,现在考虑逐步引入React Native,因此就会遇到如何向已有的原生项目中添加React Native 支持的问题。
这里学习向iOS项目中添加React Native支持。
iOS 项目用Cocoapod
1.创建iOS 项目,名称 AddReactNativeToiOS
2.添加 Cocoapod
创建 Podfile
pod install
3. 创建一个与原生项目(AddReactNativeToiOS)同名的 React Native 项目
react-native init AddReactNativeToiOS
4.删除React Native 项目的ios目录 同时将原生项目的目录改名为ios并复制到 React Native 项目下
5.打开iOS 目录下的项目
6,执行配置
选择 Addfiles to "AddReactNativeToiOS" 然后找到node_modules/react-native/React/React.xcodeproj 单击添加
添加依赖的静态库
打开Xcode 工程 Build Phases ->Link binary With Libraries
按照同样的方法,再添加其他的依赖如下
node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj
node_modules/react-native/Libraries/Text/RCTText.xcodeproj
node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj
这里添加的依赖只是React Native 开发中用到的基本功能,如果想要在开发中使用其他功能,可按照上面的操作进入目录中添加相应的静态库
7.配置静态编译选项
打开Xcode 工程 Build Settings ->Other Link Flags 选项 添加 -ObjC 和 -lc++
8 打开原生项目 在Appdelegate 中添加代码
9 运行项目 后会发现编译错误,提示找不到头文件
打开Xcode 工程 Build Settings ->Header Search Path 选项 添加 "${SRCROOT}/../node_modules/react-native
记得选择 recursive
10. 在再次编译前执行最后一项配置
打开Xcode 工程 的info.plist 添加 App Transport Security Settings 并设置类型为Dictionary 然后在该描述下添加 Allow Arbitrary Loads 并设置类型为 YES
配置完成 clean 一下工程操作,然后再次执行编译运行
运行成功,向iOS项目中添加React Native支持 完毕!
源码地址:https://github.com/kangxg/React-Native- AddReactNativeToiOS