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

View Code

 

若是按照以前的導入的話會報錯:　

須要加上:

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