ReactNative学习——原生Android项目集成RN

准备前工作：

1、RN环境（python2、nodejs）

2、使用AndroidStudio创建好一个Demo工程

一、基础文件添加

1、package.json文件添加

这个文件可以从已有的RN项目里面copy到Demo工程根目录下，也可以自己新建一个空白的package.json文件，粘贴下面的代码：

注意：name替换成自己的项目名

{
"name": "HelloRN",
"version": "0.0.1",
"private": true,
"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
},
"dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.47.2"
},
"devDependencies": {
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "3.0.1",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
    "preset": "react-native"
}
}

2、index.android.js文件添加

这个文件是添加在项目根目录下，可以直接从已有RN项目里面cooy过来，或者自己新建index.android.js，粘贴下面的代码(代码来源官网的HelloWorld)：

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
    render() {
    return (
      <Text>Hello world!</Text>
    );
 }
}

// 注意，这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

二、安装npm模块

使用AndroidStudio自带的命令行，输入npm install，执行完成后，会在根目录看到新增node_modules文件

三、依赖添加

1、根目录的build.gradle文件

在allprojects节点下，添加如下代码：

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

2、主moudle的build.gradle文件

dependencies节点下添加：compile "com.facebook.react:react-native:+" // From node_modules;

也就是我们平时添加依赖的地方

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

四、代码部分修改

前提：完成上面的步骤，重新编译通过(否则下面会出现找不到类)

1、Application

项目的Application需要实现RNReactApplication接口

注意：下面BuildConfig要导入自己项目包名下的，不要导成了faceBook或者其他lib库的

public class HelloRnApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
        //注意：BuildConfig需要导入自己项目包名下的BuildConfig
        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);
}
}

如果没配置Application的，还需要到AndroidManifest.xml文件中完成配置：

2、Activity

需要继承自ReactActivity，或者网上也方案实现DefaultHardwareBackBtnHandler接口也可以

public class ReactNativeActivity extends ReactActivity {

/**
 * Returns the name of the main component registered from JavaScript.
 * This is used to schedule rendering of the component.
 */
    @Override
    protected String getMainComponentName() {
        return "HelloRN";
    }
}

3、AndroidManifest.xml

增加两项权限

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

五、启动npm服务

进入到项目的工作空间目录，ctrl+鼠标右键，在此处打开命令行，执行react-native start指令，启动npm服务端