在安卓项目中集成React Native
React Native当前版本为0.35.0，按照官网文档集成至原生安卓项目时，发现文档较旧，记录下在该版本下的集成过程。
新建Anroid项目，建立文件目录
首先在Android Studio中新建Android项目MyApplication，然后建立父目录rn-integration，如图
初始化React Native环境
在rn-integration目录下，执行下面命令，初始化React Native环境
$ npm init
$ npm install --save react react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
在当前目录下，新建index.android.js，添加代码
'use strict';
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class HelloWorld extends React.Component {
render() {
return (
Hello, React Native
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
文件目录如下图
在Android项目中配置React Native依赖
在app的build.gradle文件里，添加React Native依赖：
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules.
}
在project的build.gradle文件里，添加本地React Native maven仓库的入口：
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
...
}
在开发模式下，需求去本地的服务器加载Javascript文件，所以需要在AndroidManifest.xml里面添加网络访问权限：
在调试模式下，需要加入DevSettingsActivity声明：
添加原生代码
React Native至0.29.0版本后，原生初始化部分代码重构，引入了ReactNativeHost和ReactApplication。下述更新适用于使用0.29.0之后版本，之前版本参考官网文档。
在AndroidManifest.xml中为
...
新建MainApplication类
package com.example.gongqi.myapplication;
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 MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
修改MainActivity代码
package com.example.gongqi.myapplication;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.WindowManager;
import com.facebook.react.ReactActivity;
import java.util.Arrays;
import java.util.List;
public class MainActivity 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 "HelloWorld";
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
}
}
运行
在命令行中进入rn-integration目录，执行react-native start启动本地server，在Android Studio中可以运行项目安装到模拟器或者真机
更多
Android最低支持版本
React Native for Android支持到Android 4.1，新建项目时，android:minSdkVersion="16"
第三方依赖
实际开发时，通常会为React Native安装第三方依赖。
可以使用rnpm安装依赖完成设置，或者手动添加配置，此时，需要首先在settings.gradle中引入项目，然后在app/build.gradle中添加依赖，然后在MainApplication的ReactNativeHost的getPackages方法中加入第三方库
运行gradlew assembleRelease打包时，需要修改proguard-rules.pro设置，否则会在打包阶段提示出错
# Add project specific ProGuard rules here.
# By default, the flags in this file are appended to flags specified
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
# You can edit the include path and order by changing the proguardFiles
# directive in build.gradle.
#
# For more details, see
# http://developer.android.com/guide/developing/tools/proguard.html
# Add any project specific keep options here:
# If your project uses WebView with JS, uncomment the following
# and specify the fully qualified class name to the JavaScript interface
# class:
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
# public *;
#}
# Disabling obfuscation is useful if you collect stack traces from production crashes
# (unless you are using a system that supports de-obfuscate the stack traces).
-dontobfuscate
# React Native
# Keep our interfaces so they can be used by other ProGuard rules.
# See http://sourceforge.net/p/proguard/bugs/466/
-keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
-keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
-keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip
# Do not strip any method/class that is annotated with @DoNotStrip
-keep @com.facebook.proguard.annotations.DoNotStrip class *
-keep @com.facebook.common.internal.DoNotStrip class *
-keepclassmembers class * {
@com.facebook.proguard.annotations.DoNotStrip *;
@com.facebook.common.internal.DoNotStrip *;
}
-keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
void set*(***);
*** get*();
}
-keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
-keep class * extends com.facebook.react.bridge.NativeModule { *; }
-keepclassmembers,includedescriptorclasses class * { native ; }
-keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; }
-keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; }
-keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; }
-dontwarn com.facebook.react.**
# okhttp
-keepattributes Signature
-keepattributes *Annotation*
-keep class okhttp3.** { *; }
-keep interface okhttp3.** { *; }
-dontwarn okhttp3.**
# okio
-keep class sun.misc.Unsafe { *; }
-dontwarn java.nio.file.*
-dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
-dontwarn okio.**
如果觉得有帮助，可以扫描二维码对我打赏，谢谢
