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