#
#
轉載請標明出處:
[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)
- 前言
- React Native For Android環境配置以及第一個實例(1)
- React Native開發IDE安裝及配置(2)
- React Native應用設備運行(Running)以及調試(Debugging)(3)
- React Native移植原生Android項目(4)
- React Native進行簽名打包成Apk(5)
- React Native庫版本升級(Upgrading)與降級講解(6)
- React Native控件之View視圖講解(7)
- React Native配置運行官方例子-初學者的福音(8)
- React Native控件之Text組件講解(9)
- React Native控件之Image組件講解與美團首頁頂部效果實例(10)
- TextInput組件講解與QQ登錄界面實現(11)
- ProgressBarAndroid進度條講解(12)
- DrawerLayoutAndroid抽屜導航切換組件講解(13)
- ScrollView組件講解(14)
- ToolbarAndroid工具欄控件講解以及使用(15)
- Switch開關與Picker選擇器組件講解以及使用(16)
- ViewPagerAndroid講解以及美團首頁頂部效果實例(17)
- Touchable*系列組件詳解(18)
- React Native專題文章講解,不斷更新中.....
- ListView組件講解以及最齊全實例(19)
- 超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
- React Native超棒的LayoutAnimation(布局動畫)
- PullToRefreshViewAndroid下拉刷新組件講解(20)
- RefreshControl組件詳解(21)
- WebView組件詳解以及實例使用(22)