react-native 嵌入到现有的Android原生应用

环境搭建

参照react native的环境搭建

嵌入原生Android应用

在应用根目录下执行

npm init

会在根目录下生成package.json文件

打开packge.json文件，在”scripts”中加入：

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

执行

npm install --save react react-native

新建测试react native应用。（正式应用替换即可）

在根目录下新建index.android.js
内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
'use strict';

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

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

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

编辑app的build.gradle文件, 在dependencies中加入：

compile "com.facebook.react:react-native:0.37.0" // From node_modules.

将0.37.0替换为使用到的react native版本号;

配置defaultConfig加入：

1
2
3
ndk {
    abiFilters "armeabi-v7a", "x86"
}

将版本改为23.0.1

compile 'com.android.support:appcompat-v7:23.0.1'

编辑项目的build.gradle文件

在allprojects->repositories中加入：

1
2
3
4
maven {
    // All of React Native (JS, Android binaries) is installed from npm
    url "$rootDir/node_modules/react-native/android"
}

改完gradle文件后，会提示同步，进行同步。

同步会提示minSdkVersion 15 cannot be smaller than version 16.
将app中的build.gradle里的minSdkVersion改为16
再同步

编辑项目的gradle.properties文件，加入

android.useDeprecatedNdk=true

在AndroidManifest.xml文件中加入：

1
2
<uses-permission android:name="android.permission.INTERNET" />
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

添加原生代码，作为调用react native应用的入口。

新建Activity:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

如果android版本小于5，将继承的Activity该为AppCompatActivity
解决里面提示的依赖问题

添加跳转至MyReactActivity的入口

在android 6.0会出现permission denied for this window type的权限问题，需要在跳转时做判断(仅限调试时，因为调试页面。打包后正常)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if (Build.VERSION.SDK_INT >= 23) {
            if(!Settings.canDrawOverlays(MainActivity.this,)) {
                Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION);
                startActivity(intent);
                return;
            } else {
                //绘ui代码, 这里说明6.0系统已经有权限了
                Intent intent = new Intent(MainActivity.this,MyReactActivity.class);
                startActivity(intent);
            }
        } else {
            //绘ui代码,这里android6.0以下的系统直接绘出即可
            Intent intent = new Intent(MainActivity.this,MyReactActivity.class);
            startActivity(intent);
        }

调试的时候先执行npm start，然后在android studio里进行调试

打包发布

  1. 创建目录app/src/main/assets。
  2. 执行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/
  3. 在Android Studio里选择Build→Generate Signed APK…，生成正式版的apk。

demo地址

https://github.com/gehaiqing/react-native-integration-android-demo

本文地址： http://gehaiqing.com/2016/11/13/react-native-integration-with-android/