準備前工作：
1、RN環境（python2、nodejs）
2、使用AndroidStudio創建好一個Demo工程
一、基礎文件添加
1、package.json文件添加
這個文件可以從已有的RN項目里面copy到Demo工程根目錄下，也可以自己新建一個空白的package.json文件，粘貼下面的代碼：
注意：name替換成自己的項目名
{
"name": "HelloRN",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.2"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "3.0.1",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
2、index.android.js文件添加
這個文件是添加在項目根目錄下，可以直接從已有RN項目里面cooy過來，或者自己新建index.android.js，粘貼下面的代碼(代碼來源官網的HelloWorld)：
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
// 注意，這里用引號括起來的'HelloWorldApp'必須和你init創建的項目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
二、安裝npm模塊
使用AndroidStudio自帶的命令行，輸入npm install，執行完成后，會在根目錄看到新增node_modules文件
三、依賴添加
1、根目錄的build.gradle文件
在allprojects節點下，添加如下代碼：
maven {
url "$rootDir/node_modules/react-native/android"
}
2、主moudle的build.gradle文件
dependencies節點下添加：compile "com.facebook.react:react-native:+" // From node_modules;
也就是我們平時添加依賴的地方
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules
...
}
四、代碼部分修改
前提：完成上面的步驟，重新編譯通過(否則下面會出現找不到類)
1、Application
項目的Application需要實現RNReactApplication接口
注意：下面BuildConfig要導入自己項目包名下的，不要導成了faceBook或者其他lib庫的
public class HelloRnApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
//注意：BuildConfig需要導入自己項目包名下的BuildConfig
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
如果沒配置Application的，還需要到AndroidManifest.xml文件中完成配置：
2、Activity
需要繼承自ReactActivity，或者網上也方案實現DefaultHardwareBackBtnHandler接口也可以
public class ReactNativeActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "HelloRN";
}
}
3、AndroidManifest.xml
增加兩項權限
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
五、啟動npm服務
進入到項目的工作空間目錄，ctrl+鼠標右鍵，在此處打開命令行，執行react-native start指令，啟動npm服務端
六、效果
項目運行到模擬器上，就完成了
