? ? ? ?在本教程的開始，就曾經提到過純Rn和原生與RN混合開發的兩種概念。之前的兩個Demo如果不考慮難易程度的話，則為純Rn應用開發。但在實際生產中，畢竟Rn的組件還不是那么完善，所以，當我們需要比較炫酷的動畫效果或者在使用Rn組件時遇到詭異的坑而沒有進展的時候，我們可以使用Rn與原生協同開發來實現最終效果。

React Native設計為可以在其基礎上編寫真正的原生代碼，并且可以訪問平臺所有的能力。這是一個相對高級的特性，我們并不認為它應當在日常開發的過程中經常出現，但具備這樣的能力是很重要的。如果React Native還不支持某個你需要的原生特性，你應當可以自己實現該特性的封裝。（這就麻煩了）

下面，我們來介紹我們的Demo3，照例先給出效果圖（Android）：

（這個是在Demo2的樣式基礎上改的，由于Demo2的樣式在Android上根本沒法看，所以我適當增加了輸入框的寬度，添加了marginBottom等…）

項目git地址：https://github.com/yujiesuperman/react-native-demo3-RnandNative

Demo3總共完成了兩點：

從原生開機動畫跳轉到Rn登陸頁面，從Rn主界面調用Native的Toast方法和獲取字符串數據。

（一）從Rn頁面調用Native的組件方法

? ? ? 假設我們希望可以從Javascript發起一個Toast消息（Android中的一種會在屏幕下方彈出、保持一段時間的消息通知）：

? ? ? 使用AS導入Android文件夾下的gradle項目。

①第一步是先添加一個原生的類（CustomToastModule），讓他繼承ReactContextBaseJavaModule， ?在這個方法中，我們主要的目的有兩個，

? ? ? 1）重寫getName方法，比如這里return的是NativeToastAndroid

? ? ? 2）重寫一個show方法，里面有native實現的一些功能

最終的目的就是能在JavaScript中調用

NativeToastAndroid.show('這個彈窗來自Android ', NativeToastAndroid.SHORT );

來調起一個Toast通知。

備注：一個可選的方法getContants返回了需要導出給JavaScript使用的常量。它并不一定需要實現，但在定義一些可以被JavaScript同步訪問到的預定義的值時非常有用。這樣的話，JavaScript寫SHORT或者LONG這邊就能對應替換了

②再添加一個類（NativeToastAndroidReactPackage），繼承ReactPackage，

這個類要將方法暴露出去，在應用的Package類的createNativeModules方法中添加這個模塊，把我們的CustomToastModule加進去，讓rn調用。

③在MainApplication中

? ? ? ?這里是第三個需要修改的類，剛才定義完ToastAndroidReactPackage方法的時候，需要在這里最終注冊

添加到return列表里。

④從AS中切回Rn中，

這個方法不是必須的，為了讓你的功能從JavaScript端訪問起來更為方便，通常我們都會把原生模塊封裝成一個JavaScript模塊。

這不是必須的，但省下了每次頁面在使用之前，

都從NativeModules中獲取對應模塊( . NativeToastAndroid) ?的步驟。這個JS文件也可以用于添加一些其他JavaScript端實現的功能(也就是說不必單拉出一個文件來實現這個東西，作者是為了方便閱讀，才單建立的目錄)。

⑤調用的時候，從上面引入

備注：從Rn調用Android的Toast組件我們已經寫完了，那么有些同學可能要問了，那要從Native向Js傳遞數據該咋辦？其實非常簡單，而且又多種實現的方式，這里只列舉一種：

在剛才的show方法下面再弄一個dataToJs，寫法如上，然后在Rn的js中這樣添加：

就完成了效果圖中的Alert彈窗展示從Native端拿到的數據了，

至于其他的獲取方式請參考Rn中文網鏈接：

http://reactnative.cn/docs/0.42/native-modules-android.html#content

注意：Rn也并沒有封裝全部的UI組件，只是封裝了一部分，要想自己封裝，提供一個ImageView之類的UI組件，則需要

①創建一個ViewManager的子類。

②實現createViewInstance方法。

③導出視圖的屬性設置器：使用@ReactProp（或@ReactPropGroup）注解。

④把這個視圖管理類注冊到應用程序包的createViewManagers里。

⑤實現JavaScript模塊。

在這里就不詳細介紹了，請想深入了解的朋友去Rn中文網上閱讀相關內容：

http://reactnative.cn/docs/0.42/native-component-android.html#content

（二）加入原生開機動畫AwesomeSplash

下面說下如何從炫酷的開機動畫跳轉到我們的Rn頁面，其實非常簡單，在GitHub上可以參看到AwesomeSplash的使用方法，

附上git鏈接：https://github.com/ViksaaSkool/AwesomeSplash

注意，他有一行注釋，就是千萬不要復寫onCreate方法，所以，如果你和我一樣是新建了一個activity，就要刪掉你的onCreate方法。

而且還要從git-AwesomeSplash上面的Demo中把對應的缺失的文件補充進來，在下面的animationsFinished方法中創建跳轉意圖，跳轉到RN的Activity頁面。

最后從配置文件中，把我們的AnimActivity設置為啟動頁面即可。

備注：可能有些人要問了，你這是RN項目中集成Native頁面，那如果是原有的Native項目該怎么去集成Rn頁面呢？

其實我感覺原理是差不多的，類似于環境轉移，比照著Rn項目生成的Native殼子里面的配置，去給我們自己之前的Native項目添加Rn支持，最后還是Native頁面跳RnActivity或者RnFragment。

比如首先配置build.gradle，然后再還需添加react native的DevSettingActivity，寫類繼承ReactActivity，提供一個實現ReactApplication的全局Application文件等等…如果想了解具體步驟的話可以參看：http://lib.csdn.net/article/reactnative/50089

總結：

好了，Demo3也講完了，現在我們來看下如果要進行一個Rn的項目開發大概需要進行哪些準備設計工作？

①設計組件數量，設計應用頁面到底該由哪些組件構成，組件的子組件數量

? ?組件的劃分遵循單一責任原則。

②Redux的狀態數的設計，（結合Demo2）

③路由的設計，頁面的組合方式（結合Demo2）

④是不是需要使用Native代碼配合