新公司也打算做rn,还是得捡起来再度学习.开撸!

react native一个版本一个样子,之前写的rn与iOS交互系列在最新版本中有点出入(0.50.4版本).今天填一下坑.

首先上npm版本,react native版本,cocoapod版本:

首先在Podfile中导入的库有点区别,最新的是这样的:

  1. platform :ios, "8.0"
  2. use_frameworks!
  3. target "FF-RN" do
  4. # 取决于你的工程如何组织,你的node_modules文件夹可能会在别的地方。
  5. # 请将:path后面的内容修改为正确的路径(一定要确保正确~~)。
  6. pod 'yoga', :path => './ReactComponent/node_modules/react-native/ReactCommon/yoga'
  7. pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [
  8. 'Core',
  9. 'RCTActionSheet',
  10. 'RCTGeolocation',
  11. 'RCTImage',
  12. 'RCTNetwork',
  13. 'RCTPushNotification',
  14. 'RCTSettings',
  15. 'RCTText',
  16. 'RCTVibration',
  17. 'RCTWebSocket',
  18. 'BatchedBridge'
  19. ]
  20. end

之前的:

  1. platform :ios, "8.0"
  2. use_frameworks!
  3. target "NativeAddRN" do
  4. # 取决于你的工程如何组织,你的node_modules文件夹可能会在别的地方。
  5. # 请将:path后面的内容修改为正确的路径(一定要确保正确~~)。
  6. pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [
  7. 'Core',
  8. 'RCTActionSheet',
  9. 'RCTGeolocation',
  10. 'RCTImage',
  11. 'RCTNetwork',
  12. 'RCTPushNotification',
  13. 'RCTSettings',
  14. 'RCTText',
  15. 'RCTVibration',
  16. 'RCTWebSocket'
  17. ]
  18. end

如果按照之前的导入的话会报错: 

需要加上:

  1. pod 'yoga', :path => './ReactComponent/node_modules/react-native/ReactCommon/yoga'

这里注意下yoga大小写问题,保持和你工程的该文件一样

然后导入.导入之后使用Xcode打开工程发现另外一个错误:

error: 'fishhook/fishhook.h' file not found

\

这里把错误行换为#import "fishhook.h"即可.然后会发现5个新错误:

这是少导入了一个库,再加上导入即可:'BatchedBridge'

这是解决方案来源:  https://github.com/facebook/react-native/issues/16039

https://segmentfault.com/q/1010000011720866/a-1020000011722919

还有就是新的react native去除inde.ios和index.android,改为了index.这里也稍微需要修改.不了解的请看demo

OK,这个就是0.50的RN与iOS原生交互的坑.

swift 与 RN交互

在写这里时,卡了好久,怎么在swift中包含RCT_EXPORT_MODULE()宏.最后还是实现不了,只能 以OC做中间桥梁,以RN -> OC ->Swift的方式来实现.

其中,大部分代码和OC类似,只涉及到OC和swift的交互(具体的百度一大堆).

具体代码见下方的github.

github: https://github.com/pheromone/IOS-native-and-React-native-interaction 中的FF-RN 和 swiftRN

  1.  

react native 0.50与OC交互 && Swift与RN交互的更多相关文章

  1. React Native 0.50版本新功能简介

    React Native在2017年经历了众多版本的迭代,从接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案.虽然,目前存在着很多的功能和性 ...

  2. 将React Native 集成进现有OC项目中(过程记录) 、jsCodeLocation 生成方式总结

    将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目.又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native ...

  3. Android 工程集成React Native 0.44 注意点

    当前(2017年5月22日 )React Native开发相当火爆,但是搜索下来,没有最新版本0.44集成的教程,因此尝试了一下如何集成到Android原生工程中去.本篇旨在记录出现的问题以及应对方式 ...

  4. react native 0.56.0版本在windows下有bug不能正常运行

    react native的0.56.0版本在windows下有bug不能正常运行请init 0.55.4的版本 react-native init MyApp --version 0.55.4 注意v ...

  5. React Native 0.56.1初始化项目运行出现错误(Module `AccessibilityInfo` does not exist in the Haste module map)

    当使用react-native init myApp初始化项目时,出现以下错误 出现以上错误的原因是因为0.56.1版本初始化项目就有问题,请见 https://github.com/facebook ...

  6. React Native - 0序言

    1. 什么是React Native? React Native是Facebook在React.js Conf 2015大会上推出的一个用于开发Android t iOS App的一个框架.主要编程语 ...

  7. react native 0.55.4 rctsrwebsocket会崩溃的问题解决 直接原文覆盖

    //// Copyright 2012 Square Inc.//// Licensed under the Apache License, Version 2.0 (the "Licens ...

  8. react native 0.6x 在创建项目时,CocoaPods 的依赖安装步骤卡解决方案

    前言 你需要做两件事 gem换源 pod repo 换源 实战 如果你已经成功安装了CocoaPods.那么这里你需要卸载它.gem换源1. 卸载CocoaPods 查看gem安装的东西 gem li ...

  9. pod installation failed with react native 0.44

    今天在集成react-native-sqlite-storage组件CocoaPods的时候遇到以下错误,这里记录一下错误解决方法: 报错如下: 以为是我Cocoapods的版本问题,于是更新版本: ...

随机推荐

  1. shell脚本 快照还原Hbase数据库

    #!/bin/bash for i in $(cat ./hbaseTable);do echo "disable '$i'" | hbase shellecho "re ...

  2. 'JetEntityFrameworkProvider' could not be loaded 解决办法

    原因:JetEntityFrameworkProvider引用的EntityFramework与你使用的版本不一致,造成程序加载这个DLL失败. 解决办法: 使用Reflect软件JetEntityF ...

  3. rem 转 px

    (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...

  4. 《网络是怎样连接的》PDF电子版书籍分享

    资料下载地址: 链接:https://pan.baidu.com/s/15tN9klTEsu-mQLayxI979g 提取码:ptu1 封面如下所示:

  5. redmine

    redmine直接复制图片 https://github.com/thorin/redmine_image_clipboard_paste

  6. Spring IOC、AOP、Transaction、MVC小结

    1.IOC.AOP:把对象交给Spring进行管理,通过面向切面编程来实现一些“模板式”的操作,使得程序员解放出来,可以更多的关注业务实现.                             - ...

  7. 将VS项目提交至SVN时,怎样忽略bin和obj目录中的文件

    方法一: 通过设置SVN的Global ignore pattern值. 使用下面的设定值: *.o *.lo *.la *.al .libs *.so *.so.[0-9]**.a *.pyc *. ...

  8. python 面向对象 继承 派生 组合

    具体参考博客:http://www.cnblogs.com/linhaifeng/articles/6182264.html#_label12 一.面向对象 面向对象:对象与对象之间的相互交互,不可预 ...

  9. flex布局-弹性布局

    弹性布局当前应用的非常广泛,特别是移动端,记得第一次用reactNative 写代码的时候是最开始真正接触Flex布局.1.首先最外层的容器需要指定为display:flex;由于flex的兼容版本还 ...

  10. 7. Reverse Integer Add to List★

    题目内容: Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 题目分 ...