将React Native集成到现有原生应用

核心概念

把 React Native 组件集成到现有 Android 应用中有如下几个主要步骤：

1. 配置React Native依赖和项目结构。
2. 安装JavaScript依赖包。
3. 把React Native添加到你的应用中。
4. 在应用中添加一个ReactRootView。
5. 启动 React Native 的 Metro 服务，运行应用。

1. 配置React Native依赖和项目结构

首先创建一个空目录用于存放 React Native 项目，然后在其中创建一个/android子目录，把你现有的Android项目拷贝到/android子目录中(项目根目录内开始拷贝，不包括根文件夹)。 目录结构看起来是这样：

-/ReactAppDir/
-/ReactAppDir/android/

2. 安装JavaScript依赖包

2.1 创建package.json

在项目根目录下，打开打开一个终端/命令提示行，然后运行 npm init，会自动创建名为package.json的文本文件，内容如下：

PS E:\React_Project\ReactAppDir> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (067manniu3)
version: (1.0.0)
description: entry point: (index.js)
test command: testcom
git repository: keywords: author: license: (ISC)
About to write to E: \React_Project\ReactAppDir\package.json: {
   
"name": "067manniu3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
   
"test": "testcom"
},
"author": "",
"license": "ISC"
}

Is this OK? (yes)
PS E: \React_Project\ReactAppDir>

此时目录结构如下：

-/ReactAppDir/
-/ReactAppDir/android/
-/ReactAppDir/package.json

2.2 初始化react-native

npm install –save react react-native@0.67.0     ###指定版本
npm install –save react react-native            ###不指定版本

在项目根目录下，打开打开一个终端/命令提示行，然后运行 npm install react-native，自动安装react-native的最新依赖，或者运行：

PS E:\React_Project\ReactAppDir> npm install –save react react-native@0.67.0
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known t