開篇主要記錄在原有Android項目中嵌入React-native的基本步驟。系統(tǒng)環(huán)境為mac，已經(jīng)安裝配置node和npm。

網(wǎng)上有非常多的導入資料，這里我就不在過多贅述大部分文章都有的內(nèi)容，基本概括一下，具體描述遇到的問題。

• npm init
  在已有的Android項目或者新建的Android項目中，打開Terminal，我已經(jīng)將默認.bash替換成了zsh。

Paste_Image.png

這里默認進入項目根目錄下，如果直接打開ITerm，也可以直接cd到你的項目根目錄下進行操作。

輸入以下命令：

  npm init
  npm install --save react react-native
  curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

init創(chuàng)建過程中可能會初步設(shè)置一些參數(shù)：

Paste_Image.png

這些參數(shù)可以后面在package.json中修改。

以上命令執(zhí)行完，工程中應該會出現(xiàn)node_modules包，說明react和react-native安裝了。

• 配置package.json
  在生成的package.json的scripts中加入start，如上圖部分，這是npm start入口。
  最好同時加入budle-android:

Paste_Image.png

"bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output Widgets/app/src/main/assets/index.android.bundle --sourcemap-output Widgets/app/src/main/assets/index.android.map --assets-dest Widgets/app/src/main/res/"
可能會出現(xiàn)的問題后面再講。

• 在項目根目錄新建index.android.js：

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class Widgets extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          我是 原生項目嵌入的 ReactNative
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('reactactivity', () => Widgets);

代碼只是實例，但是最后一句()=>Widgets需要是你的class名。

• 配置app下gradle和項目下gradle：
  app中的build.gradle加入react-native的依賴：

dependencies {
 ...
 compile 'com.facebook.react:react-native:+' // From node_modules.
}

項目gradle加入maven庫:

allprojects {
 repositories {
     ...
     maven {
         // All of React Native (JS, Android binaries) is installed from npm
         url "$rootDir/node_modules/react-native/android"
     }
 }
 ...
}

接下來 編譯如果沒有問題，External Libraries中會出現(xiàn)依賴包：

Paste_Image.png

目前我集成的版本是0.41.2.

• 接著在Android項目中新建一個類，并在setContentView()方法中嵌入ReactRootView：

public class ReactActivity extends Activity 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")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "reactactivity", null);
        setContentView(mReactRootView);
    }

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

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

我們可能需要在自定義的Application中實現(xiàn)ReactApplication的接口：

Paste_Image.png

接下來，我們寫一個Fragment或者Activity作為入口，點擊跳轉(zhuǎn)到ReacActivity中：

Paste_Image.png

基本配置已經(jīng)完成，接下來應該就可以npm start了：

Paste_Image.png

如果發(fā)現(xiàn)如下問題：

圖片選自網(wǎng)絡(luò).png

bundle-android就用在此處！這是因為bundle沒有打包好。找不到編譯打包后的js文件。其實就是android studio默認的尋找js文件地址和react-native自己的工具編譯所使用的地址不同。
解決方案是：我們在app/src/main 下建立asserts文件夾，并加入上面在package.json的Script中添加的bundle-android了。

同時我們注意，真機調(diào)試的時候，需要設(shè)置一下端口號:

adb reverse tcp:8081 tcp:8081

如果發(fā)現(xiàn)在mac中adb沒有作用，檢查一下你是否在.bash_profile中是否配置了adb。
如果使用zsh，也在.bash_profile中配置了adb，還是沒用？？
在.zshrc中引用一下.bash_profile：

source ~/.bash_profile
ANDROID_PATH=/Users/xxx/Library/Android/sdk/platform-tools
export ANDROID_PATH

至此，基本配置完成：

Paste_Image.png

Paste_Image.png