混合开发之Android原生加载ReactNative页面

这片文章主要记录一下Android原生加载ReactNative页面的方法，和上一篇混合开发之ReactNative调用Android原生方法可作为上下篇食用
首先还是大概的讲一下流程：
1、Androidstudio新建Android项目，命令行执行npm init，把项目初始化成RN项目
2、执行npm install –save react react-native 安装react和react-native，这里要注意一下react-native的版本问题，在使用0.56.0版本的时候，项目编译会出问题，建议使用其他版本，比如0.55.4
3、Android目录下的build.gradle引入

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

Project目录下的build.gradle引入

allprojects {
    repositories {
        google()
        jcenter()
        maven {
            //这里要注意路径 不要写错！！！切记
            url "$rootDir/node_modules/react-native/android"
        }
    }

}

添加完之后，项目先编译一遍
4、在Project目录下新建index.android.js文件，编写ReactNative代码
5、在Project目录下的scr/main中新建assets文件夹，并且在命令行中输入

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res

这里也要注意路径，不要写错
6、MainActivity继承ReactActivity返回模块名字
7、自定义MyApplication继承Application实现ReactApplication
8、运行，看效果

下面看具体步骤：
1、初始化 npm init
并且在生成的package.json文件中添加下面一行

"start": "node node_modules/react-native/local-cli/cli.js start"

修改完的package.json

{
  "name": "hydemo2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.2",
    "react-native": "^0.55.4"
  }
}

2、安装react和指定版本的react-native

npm install --save react-native@0.55.4
npm install --save react

3、Android目录下的build.gradle引入

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

Project目录下的build.gradle引入

allprojects {
    repositories {
        google()
        jcenter()
        maven {
            //这里要注意路径 不要写错！！！切记
            url "$rootDir/node_modules/react-native/android"
        }
    }

}

4、在Project目录下新建index.android.js文件，编写ReactNative代码

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

class HelloWorldApp extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello world! I222 am from ReactNattive!!</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('hydemo2', () => HelloWorldApp);

5、在Project目录下的scr/main中新建assets文件夹，并且在命令行中输入

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res

//解释一下都什么意思
react-native bundle 
--platform android  //平台类型
--dev false //是否是开发
--entry-file index.android.js //输入
--app/src/main/assets/index.android.bundle //输出  
--assets-dest app/src/main/res  //资源文件

6、MainActivity继承ReactActivity返回模块名字

package com.android.sjq.hydemo2;

import com.facebook.react.ReactActivity;

import javax.annotation.Nullable;

public class MainActivity extends ReactActivity {

    @Nullable
    @Override
    protected String getMainComponentName() {
        //项目名字
        return "hydemo2";
    }
}

7、自定义MyApplication继承Application实现ReactApplication

package com.android.sjq.hydemo2;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

public class MyApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            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();
    }
}

8、完成，运行