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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!