【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项目/