之前的学习 为React Native 应用扩展原生功能,还是以 React Native 为开发主导,然而很多项目已经使用了原生开发,现在考虑逐步引入React Native,因此就会遇到如何向已有的原生项目中添加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++
打开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