这片文章主要记录一下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、完成,运行
还有一个Android和RN混合开发的demo,需要的可以下载参考,demo包含了
1、Android加载RN页面
2、Android调用RN函数
3、RN调用Android函数
传送门