1. 打開(kāi)cmd，進(jìn)入工程目錄

npm init   //提醒生成package.json文件

這個(gè)命令提示需要輸入部分信息，如圖

命令行

生成文件如下：

package.json

當(dāng)然，文件內(nèi)容我們后續(xù)還可以使用編輯器修改。

• 安裝React和React Native

npm install --save react react-native  //安裝React 和React Native

• 下載.flowconfig文件

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig //下載.flowconfig文件

也可以手動(dòng)創(chuàng)建.flowconfig文件，點(diǎn)擊這里復(fù)制文本內(nèi)容到文件中

• 在package.json文件里scripts標(biāo)簽下添加start配置

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },

• 添加index.android.js到項(xiàng)目中

'use strict';
import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

• 在app模塊下 build.gradle配置

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

注意： 最新版本中支持的是23，appcompat-v7:23.0.1**，暫時(shí)沒(méi)有試24的api

• 整個(gè)工程下build.gradle配置

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

• 添加權(quán)限
  在AndroidManifest.xml添加<uses-permission android:name="android.permission.INTERNET" />

• 集成ReactActivity

public class MyReactActivity extends ReactActivity {
    @Nullable
    @Override
    protected String getMainComponentName() {
        return "HelloWorld";//組件名
    }
}

• 在Terminal中啟動(dòng)服務(wù)

npm start 
//等效`package.json`中的`node node_modules/react-native/local-cli/cli.js start`

運(yùn)行 `npm start`，看到下圖表示啟動(dòng)成功

image.png

• 運(yùn)行模擬器，啟動(dòng)定義的MyReactActivity即可

參考鏈接：
史上最詳細(xì)的Android原生APP中添加ReactNative 進(jìn)行混合開(kāi)發(fā)教程
原生 Android 項(xiàng)目集成 React Native