android原有项目中集成react-native

react-native集成小结（各种坑）

react-native环境搭建参考

先要有个android项目

配置环境

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

android原有项目中集成react-native，为了保证后面文件下载顺利请设置镜像

1.主要根据提醒生成package.json文件，填写自己的信息，也可一路回车键，全都是默认之后在生成的文件里面修改，也可以直接copy已有的文件，就不用生成了

npm init

2.安装React和React Native 执行结束会根目录多一个node_modules文件夹

(1)不能在项目编译的同时执行命令，否则报错提示没有权限（保证项目中的app下的build文件不被占用）

(2)必须用管理员权限去运行cmd

npm install --save react react-native

3.在项目的根目录新建.flowconfig，然后把下面地址在浏览器打开内容copy过来就行了

https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

4.在app/src/main/下创建assets文件夹（路径不能错哦）执行如下命令生成bundle

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/

5.文件配置

1.在app的build.gradle中添加,下面是完整的build.gralde,有对应注释

apply plugin: 'com.android.application'

android {
compileSdkVersion 26
buildToolsVersion "26.0.1"
defaultConfig {
applicationId "study.moa.com.react2"
minSdkVersion 16// 1 此处必须>=16
targetSdkVersion 26
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

// 2 添加ndk支持
ndk { abiFilters "armeabi-v7a", "x86" }
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}

// 3 防止报错
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}

// 4 排除库 （可选）
packagingOptions { exclude "lib/arm64-v8a" }
}

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:26.+'
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha7'
testCompile 'junit:junit:4.12'

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

2.配置根目录的build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
repositories {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.3.0'

// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}

allprojects {
repositories {
jcenter()

// 此处必须修改，不然会下载老版本的react-native，导致编译失败
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
}

task clean(type: Delete) {
delete rootProject.buildDir
}

3.配置网络权限 AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="study.moa.com.myreactdemo" >

<!--网络权限-->
<uses-permission android:name="android.permission.INTERNET" />

<application
android:name=".MainApplication"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme" >
<activity android:name=".MainActivity" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

<!--debug activity-->
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

<activity android:name=".MyReactActivity"></activity>

</application>

</manifest>

4.创建一个activity实现DefaultHardwareBackBtnHandler接口

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()//
.setApplication(getApplication())//
.setBundleAssetName("index.android.bundle")//
.setJSMainModuleName("index.android")//
.addPackage(new MainReactPackage())//
.setUseDeveloperSupport(true)// 此处设置调试模式
.setInitialLifecycleState(LifecycleState.RESUMED)//
.build();
// 这里的HelloWorld名字必须要和index.android.js中的
// AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
// 名字相同
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", 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);
}
}

5.创建Application实现ReactApplication

public class MainApplication extends Application implements ReactApplication {

public static Context appContext;
private static MainApplication instance;

@Override
public void onCreate() {
super.onCreate();
instance = this;
appContext = getApplicationContext();
SoLoader.init(this,false);
}

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;
}

}

6.最后需要添加package.json配置

{
"name": "myreactdemo",
"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.0.0",
"react-native": "^0.48.4"
}
}

至此项目集成完成，下面运行。

可以在android studio中直接运行android项目，然后跳转到MyReactActivity界面，就可以看到效果了

tip: 在模拟器上模拟摇晃手机没有显示设置菜单，，， 但是在真机上就可以了

参考地址 http://www.jianshu.com/p/22aa14664cf9?open_source=weibo_search