用ReactNative开发Android —— 嵌入原生应用

程序员文章站 2024-03-25 08:31:22

...

前言

正如我上一篇博客当中提到的，现在绝大部分的ReactNative应用均是采用融合到已有项目中的方式，把项目中的某一个模块使用ReactNative来开发，所以有必要弄清楚ReactNative是如何融合到已有项目的。

一、新建一个Android项目

用ReactNative开发Android —— 嵌入原生应用
注意Minimum SDk选择API16以上

二、添加JS

打开studio的Terminal窗口，输入如下命令：

npm init

会让你输入一些初始化package.json 的配置信息，例如
用ReactNative开发Android —— 嵌入原生应用
按照提示输入就行了。
这一步完成之后，在项目的根目录下就会生成package.json这个文件，打开之后长这个样子：

下一步输入：

npm install --save react react-native

用来安装React 和React Native。
用ReactNative开发Android —— 嵌入原生应用

大约一两分钟的样子（如果卡到这里了，看看安装时是不是忘了配置镜像），完成之后你的根目录下会多了一个node_modules的文件夹，里面存放了下载好的React 和React Native。
用ReactNative开发Android —— 嵌入原生应用
下一步继续输入如下命令

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

如果PC中还没有安装curl命令在这里下载，下载后记得配置好环境变量哦（也就是把bin目录下的curl命令加入到系统环境变量里），然后最重要的是重启一下studio，要不然还是无法使用curl命令。
重启studio后输入curl会出现
用ReactNative开发Android —— 嵌入原生应用
说明已经安装成功了。
继续上面的步骤输入：

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

用于下载.flowconfig文件。显示如下说明下载成功
用ReactNative开发Android —— 嵌入原生应用
接下来把如下命令粘贴到package.json 文件下 scripts标签中

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

粘贴后的package.json文件内容如下：
用ReactNative开发Android —— 嵌入原生应用
下一步，在根目录下创建index.android.js文件并把如下代码粘贴到其中：

'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);

代码很简单，居中显示一个HelloWorld。

三、项目配置

修改app的build.gradle文件添加如下内容,并修改appcompat-v7版本为23.0.1（只能基于此版本构建）

android{
    ....
    ndk {
     abiFilters "armeabi-v7a", "x86"
    }
}
packagingOptions {
   exclude "lib/arm64-v8a"
}

configurations.all {
    resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}

dependencies {
    ...
    compile "com.facebook.react:react-native:+" // From node_modules.
    compile 'com.android.support:appcompat-v7:23.0.1'
}

修改后的build.gradle完整内容如下：

apply plugin: 'com.android.application'

android {
        compileSdkVersion 25
        buildToolsVersion "25.0.2"
        defaultConfig {
        applicationId "com.reactnative.example"
        minSdkVersion 16
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }

    configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
    }
    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:23.0.1'
    compile 'com.facebook.react:react-native:+'
    testCompile 'junit:junit:4.12'
}

项目的build.gradle中添加依赖

allprojects {
repositories {
    ...
    maven {
        // All of React Native (JS, Android binaries) is installed from npm
        url "$rootDir/../node_modules/react-native/android"
    }
}
...
}

编译通过之后查看一下使用的react-native版本
用ReactNative开发Android —— 嵌入原生应用
居然是0.20.1，这和目前的最新版0.43.2差的太远了，最新版在这里查看,或者项目中node_modules/react-native/android/
解决方案是把在项目build.gradle中配置的

url "$rootDir/../node_modules/react-native/android"

改成

url "$rootDir/node_modules/react-native/android"

重新编译，发现已经变成了0.43.2了。
继续下一步，在AndroidManifest.xml中添加网络访问权限

<uses-permission android:name="android.permission.INTERNET" />

四、创建Activity

以下几步不要安装官网的去做，官网的步骤太麻烦，而且很久没有更新了。

1.新建一个Activity，让其继承ReactActivity，并重写getMainComponentName(),返回我们在index.android.js
中注册的HelloWorld这个组件。
用ReactNative开发Android —— 嵌入原生应用
2.自定义一个Application，继承ReactApplication ，编写以下代码：

public class App 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;
    }
}

记得在AndroidManifest.xml中引用

android:name=".App"

在MainActivity中通过按钮启动我们的ReactNativeActivity

findViewById(R.id.start_rn_btn).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            startActivity(new Intent(MainActivity.this, ReactNativeActivity.class));
        }
});

下一步，app/src/main下新建assets文件夹。
运行如下命令

react-native start

如果卡在了这一步：
用ReactNative开发Android —— 嵌入原生应用
没关系，用资源管理器打开你工程的根目录，在此目录下重新运行一个命令行并在其中输入如下命令

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/