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