react native 0.50与OC交互 && Swift与RN交互
新公司也打算做rn,还是得捡起来再度学习.开撸!
react native一个版本一个样子,之前写的rn与iOS交互系列在最新版本中有点出入(0.50.4版本).今天填一下坑.
首先上npm版本,react native版本,cocoapod版本:
首先在Podfile中导入的库有点区别,最新的是这样的:
- platform :ios, "8.0"
- use_frameworks!
- target "FF-RN" do
- # 取决于你的工程如何组织,你的node_modules文件夹可能会在别的地方。
- # 请将:path后面的内容修改为正确的路径(一定要确保正确~~)。
- pod 'yoga', :path => './ReactComponent/node_modules/react-native/ReactCommon/yoga'
- pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [
- 'Core',
- 'RCTActionSheet',
- 'RCTGeolocation',
- 'RCTImage',
- 'RCTNetwork',
- 'RCTPushNotification',
- 'RCTSettings',
- 'RCTText',
- 'RCTVibration',
- 'RCTWebSocket',
- 'BatchedBridge'
- ]
- end
之前的:
- platform :ios, "8.0"
- use_frameworks!
- target "NativeAddRN" do
- # 取决于你的工程如何组织,你的node_modules文件夹可能会在别的地方。
- # 请将:path后面的内容修改为正确的路径(一定要确保正确~~)。
- pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [
- 'Core',
- 'RCTActionSheet',
- 'RCTGeolocation',
- 'RCTImage',
- 'RCTNetwork',
- 'RCTPushNotification',
- 'RCTSettings',
- 'RCTText',
- 'RCTVibration',
- 'RCTWebSocket'
- ]
- end
如果按照之前的导入的话会报错:
需要加上:
- 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
react native 0.50与OC交互 && Swift与RN交互的更多相关文章
- React Native 0.50版本新功能简介
React Native在2017年经历了众多版本的迭代,从接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案.虽然,目前存在着很多的功能和性 ...
- 将React Native 集成进现有OC项目中(过程记录) 、jsCodeLocation 生成方式总结
将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目.又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native ...
- Android 工程集成React Native 0.44 注意点
当前(2017年5月22日 )React Native开发相当火爆,但是搜索下来,没有最新版本0.44集成的教程,因此尝试了一下如何集成到Android原生工程中去.本篇旨在记录出现的问题以及应对方式 ...
- 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 ...
- 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 ...
- React Native - 0序言
1. 什么是React Native? React Native是Facebook在React.js Conf 2015大会上推出的一个用于开发Android t iOS App的一个框架.主要编程语 ...
- react native 0.55.4 rctsrwebsocket会崩溃的问题解决 直接原文覆盖
//// Copyright 2012 Square Inc.//// Licensed under the Apache License, Version 2.0 (the "Licens ...
- react native 0.6x 在创建项目时,CocoaPods 的依赖安装步骤卡解决方案
前言 你需要做两件事 gem换源 pod repo 换源 实战 如果你已经成功安装了CocoaPods.那么这里你需要卸载它.gem换源1. 卸载CocoaPods 查看gem安装的东西 gem li ...
- pod installation failed with react native 0.44
今天在集成react-native-sqlite-storage组件CocoaPods的时候遇到以下错误,这里记录一下错误解决方法: 报错如下: 以为是我Cocoapods的版本问题,于是更新版本: ...
随机推荐
- shell脚本 快照还原Hbase数据库
#!/bin/bash for i in $(cat ./hbaseTable);do echo "disable '$i'" | hbase shellecho "re ...
- 'JetEntityFrameworkProvider' could not be loaded 解决办法
原因:JetEntityFrameworkProvider引用的EntityFramework与你使用的版本不一致,造成程序加载这个DLL失败. 解决办法: 使用Reflect软件JetEntityF ...
- rem 转 px
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...
- 《网络是怎样连接的》PDF电子版书籍分享
资料下载地址: 链接:https://pan.baidu.com/s/15tN9klTEsu-mQLayxI979g 提取码:ptu1 封面如下所示:
- redmine
redmine直接复制图片 https://github.com/thorin/redmine_image_clipboard_paste
- Spring IOC、AOP、Transaction、MVC小结
1.IOC.AOP:把对象交给Spring进行管理,通过面向切面编程来实现一些“模板式”的操作,使得程序员解放出来,可以更多的关注业务实现. - ...
- 将VS项目提交至SVN时,怎样忽略bin和obj目录中的文件
方法一: 通过设置SVN的Global ignore pattern值. 使用下面的设定值: *.o *.lo *.la *.al .libs *.so *.so.[0-9]**.a *.pyc *. ...
- python 面向对象 继承 派生 组合
具体参考博客:http://www.cnblogs.com/linhaifeng/articles/6182264.html#_label12 一.面向对象 面向对象:对象与对象之间的相互交互,不可预 ...
- flex布局-弹性布局
弹性布局当前应用的非常广泛,特别是移动端,记得第一次用reactNative 写代码的时候是最开始真正接触Flex布局.1.首先最外层的容器需要指定为display:flex;由于flex的兼容版本还 ...
- 7. Reverse Integer Add to List★
题目内容: Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 题目分 ...