【React Native开发】React Native移植原生Android项目（Mac用）

注意：本教程默认已经安装所有的配置，例如react-native、node.js等

第一步、创建React Native工程目录

先创建一个文件夹，命名为HelloWorld

第二步、创建android工程

通过android studio在HelloWorld文件夹下面创建android工程，工程名命名为android。

第三步、配置android工程

1、在项目的build.gradle文件中添加依赖，我的react native的版本。大家可以根据自己的版本进行依赖添加：具体如下：

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

2、在AndroidManifest.xml文件中加入网络权限

<uses -permission android:name="android.permission.INTERNET" />

3、在AndroidManifest.xml中注册debug模式下的调试Activity

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

4、修改MainActivity

public class MainActivity 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(BuildConfig.DEBUG)                .setInitialLifecycleState(LifecycleState.RESUMED)                .build();        mReactRootView.startReactApplication(mReactInstanceManager, "showHelloWorld", null);        setContentView(mReactRootView);    }    @Override    public void invokeDefaultOnBackPressed() {        super.onBackPressed();    }    @Override    protected void onPause() {        super.onPause();        if (mReactInstanceManager != null) {            mReactInstanceManager.onPause();        }    }    @Override    protected void onResume() {        super.onResume();        if (mReactInstanceManager != null) {            mReactInstanceManager.onResume(this,this);        }    }}

其中有一句代码如下：

mReactRootView.startReactApplication(mReactInstanceManager, "showHelloWorld", null);

此代码中的“showHelloWorld”后面要用到

第四步、其他配置

1、启动终端，进入到HelloWorld文件下，运行命令npm init，此时需要用户输入一些信息，其中只有name是必须的，用户输入name，其他 信息直接默认就可以。执行完这一步，用户可以在HelloWolrd文件夹下看到pageage.json文件，打开就可以看到刚才输入的配置信息。
2、运行命令npm install –save react-native，安装react native模块以及相关node模块。结束后会在HelloWorld文件夹中看到node_modules文件夹。PS：此过程时间有一些长，网络不好，还有可能有的依赖下载不下来，我就因为这个踩了坑。运行的时候缺少依赖。又重新npm install的。
3、配置flow，运行命令如下：

curl -o .flowconfig  https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

4、修改之前生成的package.json文件，在scripts标签中添加如下代码
删除原来的

"start": "node_modules/react-native/packager/packager.sh"

5、新建js文件、命名为index.android.js，添加如下代码：

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

还记得上文提到的那个showHelloWorld吗？在这里用到了，这两个要对应起来。并且此js文件中的class MyAwesomeApp extends React.Component {
这行代码中的MyAwesomeApp要和React.AppRegistry.registerComponent('showHelloWorld', () => MyAwesomeApp)
这行代码中的MyAwesomeApp对应起来！
6、启动npm：运行命令npm start等npm启动，注意其中的端口号，一般是8081
7、运行android:在HelloWorld目录下，运行命令react-native run-android，启动app！

注意：1、如果是在真机测试，需要开启弹窗的权限
2、真机测试，需要连接服务器，app启动后，摇一摇，打开debugActivity，点击最后行，输入你电脑的ip和端口号，就是刚才提到的端口号，一般是8081

到此结束！
第一次写博客，欢迎指出错误的地方！
参考：http://www.lcode.org/【react-native开发】react-native移植原生android项目/