Demo簡單流程就是：?
? ? ① 進(jìn)入原生代碼的首頁【一個(gè)按鈕（跳轉(zhuǎn)）： 兩個(gè)輸出label（測試回調(diào)輸出）】
? ? ② 通過按鈕點(diǎn)擊進(jìn)入RN渲染UI頁【控制器原生管理，兩個(gè)按鈕（帶參數(shù)返回---如果修改index.ios.js中的代碼，則不一定是返回，也可能跳轉(zhuǎn)詳情請下載demo(index.ios.js文件中39-40注釋說明)；從原生拿參數(shù)再次渲染），兩個(gè)輸出label（測試從原生拿到參數(shù)回調(diào)輸出）】
? ? ③ 點(diǎn)擊RN渲染的按鈕，響應(yīng)兩個(gè)不同的事件
我是本篇文章的Demo代碼，請狠狠點(diǎn)我！??！
一、準(zhǔn)備
混編之前請確保您的電腦必須安裝有以下兩個(gè)環(huán)境：
1. react-native
如果已經(jīng)有工程，并且已經(jīng)使用CocoaPods，只需要看以下注意的地方即可查看第二步。
需注意的地方：
OC項(xiàng)目中注意Podfile文件不要打開# use_frameworks! 這個(gè)注釋，區(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)致編譯失??；詳情請看
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
如果你沒有項(xiàng)目，完全是一個(gè)小白。那么很高興，跟著我從無到有！
? ? 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文件。簡書富文本編輯沒有代碼框，只能截圖。不想敲這代碼可以去我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下載下來node_modules文件夾里，還要記得要添加所有你需要的依賴！舉例來說，元素如果不添加RCTText依賴就不能運(yùn)行。
? ? 7?? ?打開文件，寫代碼。（恭喜你，準(zhǔn)備完畢，可以繼續(xù)打怪升級(jí)了?。。?/p>
二、原生VC攜帶參數(shù)(字典)跳轉(zhuǎn)VC(view is RN)
注意事項(xiàng)：iOS9中新增App Transport Security（簡稱ATS）特性，在iOS 9以上的系統(tǒng)中默認(rèn)網(wǎng)絡(luò)只能訪問https協(xié)議的鏈接，除非明確指明，否則應(yīng)用無法通過http協(xié)議連接到localhost主機(jī)。
我建議你在Info.plist文件中將localhost列為App Transport Security的例外，或者打開ATS(Allow Arbitrary Loads 設(shè)為 YES)，如果不這樣做，應(yīng)用在嘗試通過http連接到服務(wù)器時(shí)，會(huì)遭遇這個(gè)錯(cuò)誤 - Could not connect to development server。
在RNUtil文件夾中創(chuàng)建index.ios.js文件，也就是即將和原生交互的前端文件（不會(huì)寫的，先把我github的文件拷貝，運(yùn)行起來看看效果然后好奇心會(huì)指導(dǎo)你學(xué)習(xí)的）。它會(huì)使用 React.createElement 來構(gòu)建應(yīng)用 UI, React會(huì)將其轉(zhuǎn)換到原生環(huán)境中，綁定在我們創(chuàng)建的RN管理VC view中。
這里需要注意：
使用命令行 cd到 RNUtil（react-native start 或者 npm start）開啟本地服務(wù)，這樣項(xiàng)目才能訪問你的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)類名叫 RNBrageModule，h文件要繼承RCTBridgeModule協(xié)議，m文件就要實(shí)現(xiàn)兩個(gè)宏封裝好的方法。
注意的地方：RCT_EXPORT_MODULE(hans); 這個(gè)RCT協(xié)議的實(shí)現(xiàn)宏，就是要和index.ios.js文件中的兩端交互對(duì)象一致，如果不寫hans，則使用類名（當(dāng)前為：RNBridgeModule）作為兩端交互對(duì)象，js文件要使用的也是你類名，不再是你自定義的。
3、RN View所管理的VC 收到通知，處理通知
這里有個(gè)需要注意的地方，就是收到通知回來的處理函數(shù)是一條RN的特殊線程，需要跳轉(zhuǎn)控制器必須在主線程中實(shí)現(xiàn)。
我覺得發(fā)通知，利用自己的包裝控制器去做跳轉(zhuǎn)，是不是個(gè)好辦法呢？網(wǎng)友們有什么更好的建議呢？有沒有一種辦法是通過RN回調(diào)??(我也不清楚)獲得RCTRootView所在VC，然后直接跳轉(zhuǎn)（感覺越來越偏離什么鬼MVC/MVVM jio囧ng...）
四、總結(jié)
? ? 由于本人所學(xué)較淺，也在由廣及深的學(xué)習(xí)中，本文只是簡單的說一下原生和RN的簡單互動(dòng)以及途中碰到問題后解決問題的過程，僅廣面給大家一個(gè)前端邁腳的機(jī)會(huì)，深度方面就不誤人子弟了?？梢园俣然蛘吖雀鑼W(xué)習(xí)這方面的知識(shí)。要想深入比如兩端的回調(diào)，則需要看一篇大神的文章結(jié)合我的簡單鞏固一下。馬上跳轉(zhuǎn)大神文章地址，請戳我?。?/a>， 如果想完全踏入前端的話盡量多學(xué)習(xí)一些RN或者Weex的思想，重要是多操作，RN的話有一篇轉(zhuǎn)行的踏坑路線。說實(shí)話，最近的移動(dòng)端飯碗很不好拿，成千上萬人惦記著你們的飯碗，要想拿得穩(wěn)多學(xué)習(xí)是必須的。一直覺得“js才是打通我全棧任督二脈的一陽指”。以后有丁點(diǎn)心得也會(huì)再次回來分享，借此鞏固。也為了后面復(fù)習(xí)，日后目光廣了回來調(diào)侃這時(shí)候自己的借口和理由。
? ? 有人可能會(huì)問除了RN還有Weex或者其他，怎么把握呢？那么我也反問iOSer或其他: “除了OC還有Swift或者Android /Java/Python/GO等，你又怎么把握呢？只學(xué)其中一門能長久？？” 。話說回來，Weex我還沒開始研究，只是看了一篇冰霜大神寫的《Weex 是如何在 iOS 客戶端上跑起來的》，感覺兩門js差別不是很大，相信你掌握了一門再去學(xué)另一門相對(duì)會(huì)比較容易，重要的是會(huì)分析他們各自機(jī)制在iOS端或者如何做到跨平臺(tái)的思想。
