开发工具：Android Studio ， WebStorm
参考链接：React Native官方中文文档
一.创建React Native项目
1.在本地React Native项目目录下，创建一个文件夹，取名为为ReactApp[名字随便取]
2.在ReactApp文件夹下，创建一个名为android文件夹【注：小写】,并将你现有的Android项目拷贝到/android子目录中。
3.在ReactApp文件夹下，创建一个名为package.json的空文本文件，并将以下内容拷入：
{
"name": "ReactApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.46.4"
}
}
注：代码中name为你当前RN项目的名称，语法请严格遵守Json语法规范
4.接下来我们使用npm（node包管理器，Node package manager）在项目根目录安装React和React Native模块，打开终端运行：npm install ,RN所需要的模块会被安装到项目根目录下的node_modules/目录中。
二.打开Android Studio 将/android子目录作为Android项目导入到AS中，导入项目无报错，开始以下步骤：
-
配置maven：
注：如果项目minSdkVersion小于16，请修改为16，RN不支持16版本以下的设备
1.在你的app中 build.gradle 文件中添加 React Native 依赖:
dependencies { ... compile "com.facebook.react:react-native:+" // From node_modules. }2.在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 "allprojects" 代码块中:
allprojects { repositories { jcenter() maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } } }注：同步Gradle如果报这个错误：
Warning:Conflict with dependency 'com.google.code.findbugs:jsr305'. Resolved versions for app (3.0.1) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.
在你的app中 build.gradle 文件中添加:
android{ ... configurations.all { resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9' } } -
配置权限
1.在 AndroidManifest.xml 清单文件中声明网络权限:
<uses-permission android:name="android.permission.INTERNET" />2.如果需要访问 DevSettingsActivity 界面（即开发者菜单），则还需要在 AndroidManifest.xml 中声明:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
三.用WebStorm打开创建ReactApp项目：
在项目根目录创建名为index.android.js文件，代码如下：
import React, {Component} from 'react';
import {AppRegistry, View, Text, StyleSheet} from 'react-native';
//import MyLog from './js/MyLog';
//import MyToast from './js/MyToast';
class ReactApp extends Component {
constructor(props) {
super(props);
//MyLog.debug("yxjie", "constructor");
//MyLog.info('yxjie', 'constructor');
}
render() {
//MyLog.debug("yxjie", "render");
return (
<View style={[styles.center, styles.flex]}>
<Text style={[styles.text]}>欢迎来到RN界面</Text>
</View>
);
}
}
const styles = StyleSheet.create({
flex: {
flex: 1,
backgroundColor: 'skyblue',
},
center: {
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 22,
fontWeight: 'bold',
color: 'black',
}
});
AppRegistry.registerComponent('ReactApp', () => ReactApp);
四.配置权限以便开发中开启ＲＮ红屏错误能正确显示【Android 入口Activity中配置】
1. 入口Activity的onCreate方法中添加如下代码：
//检测是否开启悬浮窗权限【RN】
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
}
}
2. 加入onActivityResult方法回调：
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted...
}
}
}
}
五.核心内容：【创建展示React Native代码显示界面，并在AndroidManifest.xml申明】
请原谅我的懒惰直接贴代码：
public class MyReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler{
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
// .addPackage(new AnExampleReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 注意这里的MyReactNativeApp必须对应“index.android.js”中的
// “AppRegistry.registerComponent()”的第一个参数
mReactRootView.startReactApplication(mReactInstanceManager, "ReactApp", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy();
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
}
注：以上代码RN官方文档都有解释，再次不废话【有不明白的请移步RN官方文档，或给我留言，谢谢！！！】
五.运行代码【若是真机调试，请用adb命令行修改设备端口为8081】
1.直接用Android Studio run一下你的代码；
2.运行Packager，再React Native项目根目录，打开终端直接运行：npm start 开启RN服务；
DuangDuangDuang~~ 看到运行结果 是不是很激动，哈哈 ！
下篇文章，会写RN注册并调用Android原生模块的控件方法
以上内容，如有错误，欢迎留言指正！ 谢谢~~~
网友评论