Demo簡(jiǎn)單流程就是：?
? ? ① 進(jìn)入原生代碼的首頁(yè)【一個(gè)按鈕（跳轉(zhuǎn)）： 兩個(gè)輸出label（測(cè)試回調(diào)輸出）】
? ? ② 通過(guò)按鈕點(diǎn)擊進(jìn)入RN渲染UI頁(yè)【控制器原生管理，兩個(gè)按鈕（帶參數(shù)返回---如果修改index.ios.js中的代碼，則不一定是返回茅撞，也可能跳轉(zhuǎn)詳情請(qǐng)下載demo(index.ios.js文件中39-40注釋說(shuō)明)；從原生拿參數(shù)再次渲染）颜阐，兩個(gè)輸出label（測(cè)試從原生拿到參數(shù)回調(diào)輸出）】
? ? ③ 點(diǎn)擊RN渲染的按鈕挖息，響應(yīng)兩個(gè)不同的事件
我是本篇文章的Demo代碼卑雁，請(qǐng)狠狠點(diǎn)我Ｍ厥邸？恪！
一础淤、準(zhǔn)備
混編之前請(qǐng)確保您的電腦必須安裝有以下兩個(gè)環(huán)境：
1. react-native
如果已經(jīng)有工程，并且已經(jīng)使用CocoaPods值骇，只需要看以下注意的地方即可查看第二步莹菱。
需注意的地方：
OC項(xiàng)目中注意Podfile文件不要打開(kāi)# use_frameworks! 這個(gè)注釋?zhuān)?a target="_blank" rel="nofollow">區(qū)別：
use_frameworks! -> dynamic frameworks 方式 -> .framework
#use_frameworks! -> static libraries 方式 -> .a
否則編譯OC項(xiàng)目會(huì)出現(xiàn) RCTConvert.h yoga/Yoga.h file not found 而導(dǎo)致編譯失斠乒吱瘩；詳情請(qǐng)看
Swift項(xiàng)目 CocoaPods 要使用use_frameworks!解決辦法。Swift解決編譯錯(cuò)誤(yoga/Yoga.h file not found)大概操作如下：
一迹缀、修改（存放ReactNative支持文件的地方）package.json文件中的"react-native": "0.42.3" （官方最新）使碾。 命令行cd到當(dāng)前目錄蜜徽，進(jìn)行npm install。
二票摇、修改Podfile文件拘鞋，保存，命令行執(zhí)行pod update --no-repo-update矢门。
# react_path 是你react-native文件夾路徑盆色。
react_path = './RNUtil/node_modules/react-native'
yoga_path = File.join(react_path, 'ReactCommon/yoga')
pod 'React', :path => react_path, :subspecs => [
'Core',
'RCTText',
'RCTImage',
'RCTWebSocket', # needed for debugging
'RCTNetwork'
]
pod 'Yoga', :path => yoga_path
如果你沒(méi)有項(xiàng)目祟剔，完全是一個(gè)小白隔躲。那么很高興，跟著我從無(wú)到有物延！
? ? 1?? ?Xcode創(chuàng)建一個(gè)新的項(xiàng)目宣旱，命令行 cd 到你剛創(chuàng)建好的項(xiàng)目文件夾
? ? 2?? ?命令行 執(zhí)行： pod init ?后再執(zhí)行 pod install
? ? 3?? ?在你的項(xiàng)目文件夾新建一個(gè)管理RN支持文件的文件夾（RNUtil）
? ? 4?? ?進(jìn)入該文件夾(RNUtil)，創(chuàng)建package.json文件叛薯。簡(jiǎn)書(shū)富文本編輯沒(méi)有代碼框浑吟，只能截圖。不想敲這代碼可以去我github下載demo代碼耗溜，去拷貝
? ? 5?? ?命令cd到RNUtil里组力，執(zhí)行npm install安裝react-native支持
? ? 6?? ?修改你項(xiàng)目文件夾中Podfile文件，添加React保存抖拴，命令行cd到項(xiàng)目文件夾執(zhí)行 pod update --no-repo-update 忿项，
這里有個(gè)注意點(diǎn)：path路徑要對(duì)應(yīng)你項(xiàng)目文件中的react-native文件夾，就是npm install下載下來(lái)node_modules文件夾里城舞，還要記得要添加所有你需要的依賴轩触！舉例來(lái)說(shuō)，元素如果不添加RCTText依賴就不能運(yùn)行家夺。
? ? 7?? ?打開(kāi)文件脱柱，寫(xiě)代碼。（恭喜你拉馋，準(zhǔn)備完畢榨为，可以繼續(xù)打怪升級(jí)了！；蛙睢）
二随闺、原生VC攜帶參數(shù)(字典)跳轉(zhuǎn)VC(view is RN)
注意事項(xiàng)：iOS9中新增App Transport Security（簡(jiǎn)稱(chēng)ATS）特性，在iOS 9以上的系統(tǒng)中默認(rèn)網(wǎng)絡(luò)只能訪問(wèn)https協(xié)議的鏈接蔓腐，除非明確指明矩乐，否則應(yīng)用無(wú)法通過(guò)http協(xié)議連接到localhost主機(jī)。
我建議你在Info.plist文件中將localhost列為App Transport Security的例外，或者打開(kāi)ATS(Allow Arbitrary Loads 設(shè)為 YES)散罕，如果不這樣做分歇，應(yīng)用在嘗試通過(guò)http連接到服務(wù)器時(shí)，會(huì)遭遇這個(gè)錯(cuò)誤 - Could not connect to development server欧漱。
在RNUtil文件夾中創(chuàng)建index.ios.js文件职抡，也就是即將和原生交互的前端文件（不會(huì)寫(xiě)的，先把我github的文件拷貝误甚，運(yùn)行起來(lái)看看效果然后好奇心會(huì)指導(dǎo)你學(xué)習(xí)的）缚甩。它會(huì)使用 React.createElement 來(lái)構(gòu)建應(yīng)用 UI, React會(huì)將其轉(zhuǎn)換到原生環(huán)境中，綁定在我們創(chuàng)建的RN管理VC view中窑邦。
這里需要注意：
使用命令行 cd到 RNUtil（react-native start 或者 npm start）開(kāi)啟本地服務(wù)蹄胰，這樣項(xiàng)目才能訪問(wèn)你的js文件并渲染到你想它在的地方。命令行關(guān)閉服務(wù)快捷鍵（control + C）
RCTRootView的初始化方法中moduleName(RNTestViewModule)參數(shù)要對(duì)應(yīng)index.ios.js文件中的
AppRegistry.registerComponent('RNTestViewModule', () => RNTestViewModule);
三奕翔、RN傳出參數(shù)(字符串或者字典)跳轉(zhuǎn)原生VC
1裕寨、創(chuàng)建Module處理RN傳出參數(shù)以及回調(diào)
2、如果需要進(jìn)行跳轉(zhuǎn)操作派继，發(fā)送通知到RN View所管理的VC
新建OC文件處理RN (index.ios.js文件)宾袜，傳出參數(shù)以及回調(diào)類(lèi)名叫 RNBrageModule，h文件要繼承RCTBridgeModule協(xié)議驾窟，m文件就要實(shí)現(xiàn)兩個(gè)宏封裝好的方法庆猫。
注意的地方：RCT_EXPORT_MODULE(hans); 這個(gè)RCT協(xié)議的實(shí)現(xiàn)宏，就是要和index.ios.js文件中的兩端交互對(duì)象一致绅络，如果不寫(xiě)hans月培，則使用類(lèi)名（當(dāng)前為：RNBridgeModule）作為兩端交互對(duì)象，js文件要使用的也是你類(lèi)名恩急，不再是你自定義的杉畜。
3、RN View所管理的VC 收到通知衷恭，處理通知
這里有個(gè)需要注意的地方此叠，就是收到通知回來(lái)的處理函數(shù)是一條RN的特殊線程，需要跳轉(zhuǎn)控制器必須在主線程中實(shí)現(xiàn)随珠。
我覺(jué)得發(fā)通知灭袁，利用自己的包裝控制器去做跳轉(zhuǎn)，是不是個(gè)好辦法呢窗看？網(wǎng)友們有什么更好的建議呢茸歧？有沒(méi)有一種辦法是通過(guò)RN回調(diào)??(我也不清楚)獲得RCTRootView所在VC，然后直接跳轉(zhuǎn)（感覺(jué)越來(lái)越偏離什么鬼MVC/MVVM jio囧ng...）
四显沈、總結(jié)
? ? 由于本人所學(xué)較淺软瞎，也在由廣及深的學(xué)習(xí)中，本文只是簡(jiǎn)單的說(shuō)一下原生和RN的簡(jiǎn)單互動(dòng)以及途中碰到問(wèn)題后解決問(wèn)題的過(guò)程，僅廣面給大家一個(gè)前端邁腳的機(jī)會(huì)铜涉，深度方面就不誤人子弟了∷爝螅可以百度或者谷歌學(xué)習(xí)這方面的知識(shí)芙代。要想深入比如兩端的回調(diào)，則需要看一篇大神的文章結(jié)合我的簡(jiǎn)單鞏固一下盖彭。馬上跳轉(zhuǎn)大神文章地址纹烹，請(qǐng)戳我！召边！铺呵， 如果想完全踏入前端的話盡量多學(xué)習(xí)一些RN或者Weex的思想，重要是多操作隧熙，RN的話有一篇轉(zhuǎn)行的踏坑路線片挂。說(shuō)實(shí)話，最近的移動(dòng)端飯碗很不好拿贞盯，成千上萬(wàn)人惦記著你們的飯碗音念，要想拿得穩(wěn)多學(xué)習(xí)是必須的。一直覺(jué)得“js才是打通我全棧任督二脈的一陽(yáng)指”躏敢。以后有丁點(diǎn)心得也會(huì)再次回來(lái)分享闷愤，借此鞏固。也為了后面復(fù)習(xí)件余，日后目光廣了回來(lái)調(diào)侃這時(shí)候自己的借口和理由讥脐。
? ? 有人可能會(huì)問(wèn)除了RN還有Weex或者其他，怎么把握呢啼器？那么我也反問(wèn)iOSer或其他: “除了OC還有Swift或者Android /Java/Python/GO等旬渠，你又怎么把握呢？只學(xué)其中一門(mén)能長(zhǎng)久端壳？坟漱？” 。話說(shuō)回來(lái)更哄，Weex我還沒(méi)開(kāi)始研究芋齿，只是看了一篇冰霜大神寫(xiě)的《Weex 是如何在 iOS 客戶端上跑起來(lái)的》，感覺(jué)兩門(mén)js差別不是很大成翩，相信你掌握了一門(mén)再去學(xué)另一門(mén)相對(duì)會(huì)比較容易觅捆，重要的是會(huì)分析他們各自機(jī)制在iOS端或者如何做到跨平臺(tái)的思想。
