# # 轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50519677](http://blog.csdn.net/developer_jiangqq/article/details/50519677) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言? ? ? ? ? ? ? ?【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/) ? ? ? ? ?前三節課程我們已經對于React Native For Android的環境搭建，IDE安裝配置以及應用運行，調試相關的知識點做了講解。今天我們來講一個非常有用的知識點。移植我們已有的原生Android項目到React Native中。 ????????? 剛創建的React Native技術交流群(282693535),歡迎各位大牛,React Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! 在React Native中React其實更多關注的是視圖View層。所以React Native本身也支持并且可以讓我們非常簡單方便的移植一個Android原生的項目到React Native中。 # (二)前提準備工作? ????????? ①.首先我們有一個采用Gradle構建的Android應用項目，這個大家直接采用Android Studio進行創建一個項目即可。我這邊新建一個目錄TestHello，然后采用Android Studio創建一個android項目在該文件夾下面。具體如下:  ????????? ②.電腦必須安裝Node.js，具體安裝使用方法([點擊進入](http://blog.csdn.net/developer_jiangqq/article/details/50456967)) # (三)Android項目相關配置 ??????? 2.1 在我們Android項目的build.gradle中添加React Native依賴，然后同步，具體代碼如下: ~~~ compile 'com.facebook.react:react-native:0.17.+' ~~~ [注意].該會同步0.17版本以上的react native，官方的版本還是停留在0.13沒有更新，我本地的reactnative是0.17版本的，所以大家這邊配置一定要跟自己本地的版本保持一致或者更新。關于這個問題今天我下午研究了一下去，踩了很多坑啊~~ 不過ReactNative中文網那邊我已經讓站長更新了版本。 ??????? 2.2緊接著我們需要在項目AndroidManifest.xml中加入網絡訪問權限 ~~~ <uses-permission android:name="android.permission.INTERNET" /> ~~~ 該僅僅用于開發階段從開發服務器加載最細的JavaScript代碼，在正式發布版本中，如果有需要可以把該網絡權限刪掉。 # (四)添加原生代碼 ???????? 在Android項目的MainActivity中，我們需要配置相關代碼來進行啟動運行React Native庫。我們需要創建ReactRootView，然后在里邊渲染React引用，并且設置成Activity的主視圖即可。 具體代碼如下: ~~~ public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { privateReactRootView mReactRootView; privateReactInstanceManager mReactInstanceManager; @Override protectedvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication(mReactInstanceManager, "TestHello",null); setContentView(mReactRootView); } @Override publicvoid invokeDefaultOnBackPressed() { super.onBackPressed(); } } ~~~ ?????? 注意以下的代碼: ~~~ mReactRootView.startReactApplication(mReactInstanceManager,"TestHello", null); ~~~ ? ? ? ? 以上其中方法第二種個參數我這邊采用TestHello來進行命名了，注意這個要和后面講到的東西進行統一，具體我們繼續往下看。 ?????? 在React Native中，其實FB給我們提供了ReactInstanceManger來替我們管理Activity相關的生命周期，所以我們需要傳遞一些Actitivty相關的生命周期到ReactInstanceManger中。具體代碼onPause()和onResume()方法如下: ~~~ @Override protectedvoid onPause() { super.onPause(); if(mReactInstanceManager != null) { mReactInstanceManager.onPause(); } } @Override protectedvoid onResume() { super.onResume(); if(mReactInstanceManager != null) { mReactInstanceManager.onResume(this,this); } } ~~~ ???? 緊接著對于返回按鈕鍵的事件我們也需要傳遞一下： ~~~ @Override public void onBackPressed() { if(mReactInstanceManager != null) { mReactInstanceManager.onBackPressed(); } else { super.onBackPressed(); } } ~~~ ????? 這樣我們就可以當用戶按下返回鍵的時候，javaScript代碼可以做相關處理。當然如果前端不處理響應的事件，那么會回調到上面的invokeDefaultOnBackPressed()方法中。繼而回退事件轉移到Activity了，下面就是Activity該怎么樣執行，就怎么樣執行了。默認事件就是關閉Activity了 ???????? 最后一步就是需要處理一下設備菜單了，默認情況下我們可以搖晃一下手機來彈出菜單，但是對于模擬器，該方法就不適用了，所以我們才攔截事件方法進行相關處理一下即可。 ~~~ @Override public boolean onKeyUp(int keyCode, KeyEvent event){ if(keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { mReactInstanceManager.showDevOptionsDialog(); return true; } return super.onKeyUp(keyCode, event); } ~~~ 到此為止我們的Android項目Activity和配置文件以及完成了最基本的配置方法了。 # (五)添加js ??????? 下面我們采用命令行，首先切換到項目的根目錄上面(我的例子是切換到TestHello目錄下) ???????? 5.1.命令行運行npm init 運行截圖如下:  該命令會創建一個package.json文件，并且提示我們輸入一些信息，默認不輸入即可，不過name必須要為全英文小寫哦，具體結果執行結果如下:  ?? 5.2.命令行運行npm install? --save react-native? 進行安裝react native模塊以及相關node模塊，運行截圖如下:  ?這里開始安裝node模塊以及react native模塊，具體運行結果會生成node_module文件夾如下：  5.3.最后運行如下命令即可: ~~~ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig ~~~ 做一下flow配置  ??????? 以上三步全部完成了，上面給我們創建node模塊，然后添加了react-native npm依賴。接下來我們需要修改package.json文件，在scripts標簽那邊添加如下代碼: ~~~ "start":"node_modules/react-native/packager/packager.sh" ~~~ 具體修改截圖如下:  5.4.現在我們創建一下文件命名為:index.android.js，然后在里邊添加如下代碼: ~~~ 'use strict'; var React = require('react-native'); var { Text, View } = React; class MyAwesomeApp extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.hello}>Hello, World</Text> </View> ) } } var styles = React.StyleSheet.create({ container:{ flex: 1, justifyContent:'center', }, hello: { fontSize:20, textAlign: 'center', margin:10, }, }); React.AppRegistry.registerComponent('TestHello', ()=> TestHello); ~~~ ???????? 以上就完成了所有的相關代碼以及react-native配置了，注意上面的都采用TestHello了，希望大家都用一樣的名字和前面MainActivity進行統一哦。 # (六)運行APP ???????? 上面的配置步驟全部完成了，下面我們要運行APP了，首先我們需要開啟開發服務器，使用如下命令即可: ~~~ npm start ~~~ 運行結果如下:  ??????? 接下來就是最后一步了，直接運行react-native run-android命令編譯運行應用就可以了，運行結果如下:  這樣就完成了一個簡單的Android原生項目移植到ReactNative中了。 # (七)最后總結 ????????? 今天移植Android原生項目移植到React Native中，期間也遇到了很多問題，例如因為官網的文檔沒有保持最新，后來經過排查踩坑才發現。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ? ? 尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)） 侵權必究！ ? ? ? ? ? 關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)  關注我的微博，可以獲得更多精彩內容 [ ](http://weibo.com/u/1855428195?s=6uyXnP)