? ? ? ? 這篇文章 主要是為了進行對react-native項目當中Android的基座進行搭建，但是不同于網上很多的其他文章，直接進行npm install生成的一個react-native的項目目錄里面包括了Android IOS 以及JS。這篇是先創建一個Android項目，之后吧react-native嵌入其中。從而把整個給拆分開來。
? ? ? ? ? http://www.lxweimin.com/p/2fbdf5a12922
? ? ? ?第一步 不用說了 就是在AndroidStudio中創建一個新的Android項目。
? ? ? ?第二步 添加JS代碼管理
? ? ? 在項目的根目錄運行以下命令
? ? 1. 先進行npm init，進行對項目中生成package.json文件，只要按照步驟進行名字版本號等等進行完成就可以了
? ? 2.進行npm install --save react react-native?
? ? ?這樣會創建一個node_modules的目錄，而react-native的源碼就會生成，之后主要就是對之中的react-native進行依賴就可以了
? ? ?3.打開package.json文件 進行添加 ?"start": "node node_modules/react-native/local-cli/cli.js start"
?第三步 就是主要Android項目中的一些配置了
? 1.進行依賴庫的添加 ? ?
? 首先在的項目build.gradle文件中
allprojects {
? ? ? repositories {
? ? ? ? ? ? ? ? ?mavenLocal()
? ? ? ? ? ? ? ? ? ?jcenter()
? ? ? ? ? ? ? ? ? ? maven {
? ? ? ? ? ? ? ? ? ? ? // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
? ? ? ? ? ? ? ? ? ? ?url"$projectDir/../node_modules/react-native/android"
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?}
}
? 2.在你app的build.gradle文件內添加React Native相關依賴：
compile 'com.facebook.react:react-native:+'?
或者
compile'com.facebook.react:react-native:0.42.3'// From node_modules.一般最好寫最新的
3.基本上都需要在AndroidManifest.xml清單文件中添加一行代碼
? 這個的主要作用是為了在開發中進行調試的作用
以及必須要添加權限否則會報錯，android studio中會要求需要INTERNRT ?Permission：
準備工作基本已經完成了
第四步主要完成react-native顯示的頁面的代碼了
public classReactMainActivityextendsAppCompatActivityimplementsDefaultHardwareBackBtnHandler {
private React RootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
private int OVERLAY_PERMISSION_REQ_CODE=0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//配置權限保證開發過程中紅屏錯誤能正確展示 設置權限
if(Build.VERSION.SDK_INT>= Build.VERSION_CODES.M) {
? ? ? ? if(!Settings.canDrawOverlays(this)) {
? ? ? ? Intent intent =new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
? ? ? ? ?Uri.parse("package:"+ getPackageName()));
? ? ? ? ?startActivityForResult(intent,OVERLAY_PERMISSION_REQ_CODE);
? ? ? }
}
mReactRootView=new ReactRootView(this);
mReactInstanceManager= ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")//可遠程地址
.setJSMainModuleName("index.android")//根目錄下index.android.js文件
.addPackage(newMainReactPackage())
.setUseDeveloperSupport(true)//如果為true，則會啟用諸如JS重新加載和調試之類的開發人員選項.反之打包
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
//'AwesomeProject'==>index.android.js 頁面內注冊名稱，可根據自己隨意調整
mReactRootView.startReactApplication(mReactInstanceManager,"AwesomeProject",null);
setContentView(mReactRootView);
}
@Override
protected void onPause() {
super.onPause();
if(mReactInstanceManager!=null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if(mReactInstanceManager!=null) {
mReactInstanceManager.onHostResume(this,this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if(mReactInstanceManager!=null) {
mReactInstanceManager.onHostDestroy(this);
}
}
@Override
public boolean onKeyUp(intkeyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_MENU&&mReactInstanceManager!=null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
//最后，必須覆蓋onActivityResult() 方法（如下面的代碼所示）來處理一致性UX的權限接受或拒絕的情況。
@Override
protected voidonActivityResult(intrequestCode,intresultCode, Intent data) {
if(requestCode ==OVERLAY_PERMISSION_REQ_CODE) {
if(Build.VERSION.SDK_INT>= Build.VERSION_CODES.M) {
if(!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted...
}
}
}
}
}
第五步 上述已經完成AndroidStudio中的設置了，最后就是要書寫react-native的js頁面代碼了
在項目的根目錄下面建一個index.android.js文件里面填寫一下代碼
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class AwesomeProject extends Component {?
?render() {??
? return (Hello world!);?
?}
}
// 注意，這里用引號括起來的'AwesomeProject'必須和你init創建的項目名一致
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
第六步，在根目錄下面打開命令窗口，運行react-native start
要是現實連接不上端口號port8081，可能是因為你電腦上的服務可能把8081端口號給占了，需要你去任務管理器去查看并把那個服務給關閉了。
再就是真機測試了，但是一般都會出現這樣的錯誤
這種一般會是兩個比較常見的問題
1.是手機連接的網絡和電腦的服務器的地址不在一個局域網中，或者手機就沒連接WiFi
2.是應該設置你手機的端口號和IP地址“ ： IP是你自己電腦的IP：端口號一般都是8081
最后就會顯示了你的手機如圖就表示成功配置完成了。
