本文的記錄適合已經(jīng)按照 React-Native 中文網(wǎng)搭建好環(huán)境并且能夠成功運(yùn)行 Hello World 的 React-Native 原生項(xiàng)目的同學(xué)。文末會(huì)放上 github 的地址。

各種環(huán)境的搭建參照 React-Native中文網(wǎng)，環(huán)境搭建好后就可以開始了。

1. 打開 AS ，新建一個(gè)原生項(xiàng)目，這里項(xiàng)目名為 RNDemo

2.在 AS 終端中輸入命令

npm init

接下來(lái)按照提示輸入對(duì)應(yīng)信息，有的可以不填，如圖：

這里寫圖片描述

**這里注意，名字不能有大寫字母！

初始化完成后就會(huì)在項(xiàng)目根目錄下生成一個(gè) package.json 文件。打開文件，在 scripts{} 里添加如下部分，用于之后啟動(dòng) packager：

"start": "node node_modules/react-native/local-cli/cli.js start"

**注意兩行之間要有逗號(hào)。

文件整體如下：

{
  "name": "rnapp",
  "version": "1.0.0",
   "description": "This is my first RN-App!",
   "main": "index.android.js",
   "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node node_modules/react-native/local-cli/cli.js start"
   },
   "author": "yq",
   "license": "ISC"
 }

2. 終端輸入命令：

npm install --save react react-native

有一個(gè)等待的過程，完成后會(huì)在項(xiàng)目根目錄下生成一個(gè) node_modules 文件夾，文件夾里的內(nèi)容就是執(zhí)行命令所下載的，如圖所示：

node_modules

但是終端會(huì)有一些警告，如圖：

這里寫圖片描述

按照提示安裝對(duì)應(yīng)版本，命令如下：

npm install --save react-native@0.47.2 react@16.0.0-alpha.12

3. 在項(xiàng)目根目錄 build.gradle 文件的 allprojects{} （注意是：allprojects 里）添加如下地址：

maven{
        url "$rootDir/node_modules/react-native/android"
     }

添加完后是這樣的：

allprojects {
repositories {
    jcenter()
    maven{
        url "$rootDir/node_modules/react-native/android"
    }
  }
}

然后在 app 目錄下的 build.gradle 里添加依賴：

compile 'com.facebook.react:react-native:+'

同步項(xiàng)目，會(huì)報(bào)如下的錯(cuò)誤：

Error:Conflict with dependency 'com.google.code.findbugs:jsr305' in project ':app'. Resolved versions for app (3.0.0) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.

在 app/bulid.gradle 文件的 android{} 模塊里添加

 configurations.all {
    //for Error:Conflict with dependency 'com.google.code.findbugs:jsr305'
    resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}

同步項(xiàng)目，上面的問題解決了，但是又有新的錯(cuò)誤，如下：

Manifest merger failed : uses-sdk:minSdkVersion 15 cannot be smaller than version 16 declared in library [com.facebook.react:react-native:0.47.2]
C:\Users\yinqi.android\build-cache\1db15acba046d1d8bc220e7717d1e2ffd328aad6\output\AndroidManifest.xml

這個(gè)還是能看的明白的，最低版本不能低于16，那我們就修改最低支持版本為16，修改后在同步項(xiàng)目 ok 了。

解決了錯(cuò)誤，還要確認(rèn)下下載到的 react-native 依賴包的版本是否是 0.47.2，如果不是 0.47.2 而是0.20.1，說明上面的 maven 地址配置的可能有問題。

3. 在項(xiàng)目根目錄下新建 index.android.js （這里的文件名要和第一步輸入的那個(gè)package name 對(duì)應(yīng)的名字一樣）文件，加入如下代碼：

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
//hello world 對(duì)應(yīng)代碼
class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World!\nThis is my first rnApp!</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    color:'red',
    textAlign: 'center',
    margin: 10,
  },
});
//這里的 rnapp 可以和項(xiàng)目的名字不一樣
AppRegistry.registerComponent('rnapp', () => HelloWorld);

4. 新建用于加載 index.android.js 的 Activity，要實(shí)現(xiàn) DefaultHardwareBackBtnHandler 接口，代碼如下：

package com.yq.rndemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;

import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

public class RNActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")//bundle 的名字
                .setJSMainModuleName("index.android")//js 文件的名字
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(true)//開發(fā)者模式
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "rnapp", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @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 void onBackPressed() {
//        if (mReactInstanceManager != null) {
//            mReactInstanceManager.onBackPressed();
//        } else {
//        }
        super.onBackPressed();
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

5. 添加權(quán)限并注冊(cè) RN 的設(shè)置界面, manifest文件如下：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.yq.rndemo">

<uses-permission android:name="android.permission.INTERNET" />
<!--懸浮窗-->
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

<application
    android:name=".RNApplication"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity
        android:name=".RNActivity"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
    <!-- React-Native 設(shè)置界面-->
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

</manifest>

最后在 MainActivity 中加入跳轉(zhuǎn)到 RNActivity 的按鈕，原生項(xiàng)目嵌入 React-Native 就完成了，接下來(lái)就是運(yùn)行項(xiàng)目看是否能成功。

5.首先啟動(dòng) package server ，命令如下：

npm start

看到 Loading dependency graph, done. 就是啟動(dòng)成功了。

然后安裝 app 到手機(jī)，命令如下：

gradlew installDebug

運(yùn)行 app 跳轉(zhuǎn)到 RNActivity 界面，有時(shí)候可能不會(huì)顯示，這時(shí)候就要配置調(diào)試端口再 Reload了，直接 Reload 會(huì)提示：

這里寫圖片描述

端口配置步驟如下：

手機(jī)菜單（Menu）按鍵 --> Dev Setting --> Debugging 下的 Debug server host & port for device，點(diǎn)擊輸入 192.168.1.xxx:8081 就可以了。

** 注：手機(jī)要和電腦在同一局域網(wǎng)下。

這時(shí)候返回點(diǎn)擊手機(jī)菜單鍵再次 Reload 就可以了；如果不行，返回重新進(jìn)入頁(yè)面。

6.另外需要注意的兩點(diǎn)

（1）調(diào)試需要懸浮窗權(quán)限，如果 app target設(shè)置為 23 以上，手機(jī)系統(tǒng)版本為 6.0 以上并且沒有動(dòng)態(tài)申請(qǐng)權(quán)限的話，一定要記得手動(dòng)開啟懸浮窗權(quán)限；

（2）在調(diào)試過程中 packger 必須要保證運(yùn)行狀態(tài)，否則進(jìn)行 Reload 操作的時(shí)候會(huì)報(bào)錯(cuò)誤，如圖：

packger沒有運(yùn)行報(bào)錯(cuò)

補(bǔ)充：加載 index.android.js 的 Activity 的另一種寫法：

1. 繼承 ReactActivity ，重寫 getMainComponentName 方法，返回值為 js 文件中注冊(cè)的名字（demo 中為 ‘rnapp’），代碼如下：

package com.yq.rndemo;

import com.facebook.react.ReactActivity;

public class MyReactActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "rnapp";
    }
}

(2) 自定義 Application 類，實(shí)現(xiàn) ReactApplication 接口（上面那種方法不需要），否則會(huì)報(bào)錯(cuò)：

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.yq.rndemo/com.yq.rndemo.MyReactActivity}: java.lang.ClassCastException: android.app.Application cannot be cast to com.facebook.react.ReactApplication

具體代碼如下：

package com.yq.rndemo;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

/**
 * Created by yinqi on 2017/8/31.
 */

public class RNApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            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);
    }
}

（3）不要忘了在 manifest 中注冊(cè)：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yq.rndemo">

    <uses-permission android:name="android.permission.INTERNET" />
    <!--懸浮窗-->
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
    <!--繼承 ReactActivity 注意：實(shí)際在 manifest 中這一行要?jiǎng)h除，否則報(bào)錯(cuò)-->
        android:name=".RNApplication"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <!--實(shí)現(xiàn) DefaultHardwareBackBtnHandler 接口-->
        <activity
            android:name=".RNActivity"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
        <!--繼承 ReactActivity-->
        <activity
            android:name=".MyReactActivity"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"></activity>
        <!-- React-Native 設(shè)置界面-->
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

最后，打正式包：

首次在 app/src/main 目錄下新建 assets 文件夾，然后終端在項(xiàng)目根目錄下執(zhí)行命令：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

以上過程是我一邊操作一邊記錄下來(lái)的，盡可能地詳細(xì)說明了步驟，過程中肯定會(huì)遇到其他問題，這就需要耐心慢慢解決了。如果有說的不對(duì)的地方，請(qǐng)指正！

GitHub Demo，node-modules文件夾由于過大沒有上傳，請(qǐng)自行下載