React Native 教程——集成到现有原生应用

心已赠人 2021-09-14 07:14 422阅读 0赞

## 开发环境准备 ##

首先按照[开发环境搭建教程][Link 1]来安装React Native在安卓平台上所需的一切依赖软件（比如`npm`）。！！！

### 1. 设置项目目录结构 ###

首先创建一个空文件夹（名字英语就行），然后把自己的原有项目放进来就行。！！！

### 2. 安装JavaScript依赖包 ###

在项目根目录（就是在刚创建的空文件夹下、和Android项目同一级别）下创建一个名为`package.json`的空文本文件，然后填入以下内容：

（也可以使用命令符创建 ： cd 文件夹名进入根目录，然后输入：npm init  按回车，就可以一行一行输入数据）

{
      "name": "MyReactNativeApp",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start"
      },
      "dependencies": {
        "react": "16.0.0-alpha.6",
        "react-native": "0.44.3"
      }
    }

> 示例中的`version`字段没有太大意义，name很重要！！！记住这个名字！！！（好像大写会报错）。本文无法在这里列出所有react native和对应的react版本要求，只能提醒读者先尝试执行npm install，然后注意观察安装过程中的报错信息，例如`require react@某.某.某版本, but none was installed`，然后根据这样的提示，执行`npm i -S react@某.某.某版本`。如果你使用多个第三方依赖，可能这些第三方各自要求的react版本有所冲突，此时应优先满足`react-native`所需要的`react`版本。
> 
>   
>

本人在这一段踩的是name的值大写、txt文本编辑时“”（ 双引号 ）会提示格式错误。只要这个配合没啥格式上的毛病就可以进行下一步了。

接下来我们使用npm（node包管理器，Node package manager）来安装React和React Native模块。 请打开一个终端/命令提示行，进入到项目目录中（即包含有package.json文件的目录），然后运行下列命令来安装：

$ npm install

这些模块会被安装到项目根目录下的`node_modules/`目录中（所有通过npm install命令安装的模块都会放在这个目录中。这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。

## 把React Native添加到你的应用中 ##

### 配置maven ###

用Android studio打开你的项目（就是单纯的打开项目就行），然后在 `build.gradle` 文件中添加 React Native 依赖:

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

> 如果想要指定特定的React Native版本，可以用具体的版本号替换 `+`，当然前提是你从npm里下载的是这个版本 。

在项目的 `build.gradle` 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 "allprojects" 代码块中:

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

> 确保依赖路径的正确！以免在 Android Studio 运行Gradle同步构建时抛出 “Failed to resolve: com.facebook.react:react-native:0.x.x" 异常。

### 配置权限 ###

接着，在 `AndroidManifest.xml` 清单文件中声明网络权限:

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

如果需要访问 `DevSettingsActivity` 界面（即真机摇晃出开发者菜单），则还需要在 `AndroidManifest.xml` 中声明:

开发者菜单一般仅用于在开发时从Packager服务器刷新JavaScript代码，所以在正式发布时你可以去掉这一权限。

### 集成代码 ###

##### 1. 创建一个`index.android.js`文件 #####

首先在项目根目录中创建一个空的`index.android.js`文件。

> `index.android.js`是React Native应用在Android上的入口文件。而且它是不可或缺的！它可以是个很简单的文件，简单到可以只包含一行`require/import`导入语句。本教程中为了简单示范，把全部的代码都写到了`index.android.js`里（当然实际开发中我们并不推荐这样做）。

##### 2. 添加你自己的React Native代码 #####

在`index.android.js`中添加你自己的组件。这里我们只是简单的添加一个`<Text>`组件，然后用一个带有样式的`<View>`组件把它包起来。

'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('MyReactNativeApp', () => HelloWorld);

### 3、创建MyReactActivity ###

> 如果你想在安卓5.0以下的系统上运行，请用 `com.android.support:appcompat` 包中的 `AppCompatActivity` 代替 `Activity` 。

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();
    
            // 注意这里的MyReactNativeApp必须对应“index.android.js”中的
            // “AppRegistry.registerComponent()”的第一个参数
            mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);  
    
            setContentView(mReactRootView);
        }
    
        @Override
        public void invokeDefaultOnBackPressed() {
            super.onBackPressed();
        }
    }

使用的是 Android Studio , 可以使用`Alt + Enter`快捷键来自动为MyReactActivity类补上缺失的import语句。

我们需要把 `MyReactActivity` 的主题设定为 `Theme.AppCompat.Light.NoActionBar` ，因为里面有许多组件都使用了这一主题。

下一步我们需要把一些activity的生命周期回调传递给`ReactInstanceManager`：

@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();
        }
    }

我们还需要把后退按钮事件传递给React Native：

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

#####  配置权限以便开发中的红屏错误能正确显示 #####

如果你的应用会运行在Android 6.0（API level 23）或更高版本，请确保你在开发版本中有打开`悬浮窗(overlay)`权限。If your app is targeting the Android `API level 23` or greater, make sure you have the `overlay` permission enabled for the development build. You can check it with `Settings.canDrawOverlays(this);`. This is required in dev builds because react native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23, the user needs to approve it. This can be acheived by adding the following code to the Activity file in the onCreate() method. OVERLAY\_PERMISSION\_REQ\_CODE is a field of the class which would be responsible for passing the result back to the Activity.

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, 0);
        }
    }

Finally, the `onActivityResult()` method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX.

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == 0) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                if (!Settings.canDrawOverlays(this)) {
                    // SYSTEM_ALERT_WINDOW permission not granted...
                }
            }
        }
    }

现在activity已就绪，可以运行一些JavaScript代码了。

### 测试集成结果[\#][Link 2] ###

You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the `index.android.bundle` package and the server running on localhost to serve it.

##### 1. 运行Packager #####

运行应用首先需要启动开发服务器（Packager）。你只需在项目根目录中执行以下命令即可：

$ npm start

##### 2. 运行你的应用 #####

保持packager的窗口运行不要关闭，然后像往常一样编译运行你的Android应用(在命令行中执行`./gradlew installDebug`或是在Android Studio中编译运行)。

> 如果你是使用Android Studio来编译运行，有可能会导致packager报错退出。这种情况下你需要安装[watchman][]。但是watchman目前没有稳定的Windows版本，所以在Windows下这种崩溃情况暂时没有特别好的解决方案。

编译执行一切顺利进行之后，在进入到MyReactActivity时应该就能立刻从packager中读取JavaScript代码并执行和显示：

![Screenshot][]

### 在Android Studio中打包 ###

Android studio正常的打包流程就行，如果第一次打包需要创建签名文件，可以看这里： [Android Studio 生成签名文件][Android Studio]

OK，到此我们已经生成APK。 一安装APK运行发现APK直接BOOM。   
为什么？？？？？   
因为平时DEBUG模式下链接的是我们本地的服务器拉去的JS文件，此时的APK包并没有将JSBundle打入APK。

接下来，我们将JS(即生成离线的jsbundle文件)资源等一起打入APK。

具体的js打包命令如下：

$ react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/

注意把上述命令中的路径替换为你实际项目的路径。如果assets目录不存在，则需要提前自己创建一个。

### 创建assets ###

进入项目主目录 执行命令   
`mkdir -p android/app/src/main/assets `  
![这里写图片描述][20161123150325885]  
此刻我们将在main目录下生成assets文件夹，用于存储index.android.bundle…

*  index.android.bundle是什么？？？    
    用于存储JS的本地文件，我们打的离线包将从其中读取资源等。

### 第二步：生成index.android.bundle文件 ###

`react-native bundle --platform android --dev false --entry-file index.android.js  --bundle-output android/app/src/main/assets/index.android.bundle  --assets-dest android/app/src/main/res/ `  
![这里写图片描述][20161123150933323]

OK! 文件生成，我们在重新执行一次Android Studio的打包流行，安装APK 即可运行离线包。

然后在Android Studio中正常生成release版本即可！

[Link 1]: http://reactnative.cn/docs/0.48/getting-started.html
[Link 2]: http://reactnative.cn/docs/0.48/getting-started.html#%E6%B5%8B%E8%AF%95%E9%9B%86%E6%88%90%E7%BB%93%E6%9E%9C
[watchman]: https://facebook.github.io/watchman/
[Screenshot]: /images/20210802/e4a3fa9e2dfd40d8ac246cdaaae4eeea.png
[Android Studio]: http://blog.csdn.net/csdn_aiyang/article/details/77991642
[20161123150325885]: /images/20210802/13548b8021b14f1a9e2e42102dbcbbf0.png
[20161123150933323]: /images/20210802/b8dec8be159e4bac8dc8f0c0d3824a90.png