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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值