爽爆天ReactNative基础篇 - 2.3 搭建Android工程

发表于 分类于 ， 阅读次数： ：

开始本章之前，仍然不厌其烦地啰嗦几句，本章节基于苹果的mac OS X 系统，本系列教程的所有文章也都是基于此系统的，本人强烈建议使用mac进行开发。

本章概述（react-native下文有时会简称 rn）：

  • 【环境】我们一开始会先检查下需要安装与配置的环境是否OK。
  • 【构建项目】然后我们会构建一个Android项目，如果已有项目我们会调整下结构。
  • 【安装Android依赖库】为了建立Android与react-native的连接，我们要在Android项目中安装rn相关的依赖库。
  • 【给Android添加rn相关代码】给Android项目添加 rn 代码，增加rn支持。
  • 【给rn项目添加rn代码】给rn项目添加rn代码
  • 【运行看效果】运行本地服务看Android应用最终效果。

1 本章示例代码

1
https://github.com/luochenxun/react-native-happy-learn.git 分支名： chapter2.3

你可以这样拉下来：找个目录，然后敲

1
2
git clone -b chapter2.3 https://github.com/luochenxun/react-native-happy-learn.git rnProject
进入 rn 目录，执行  `npm install`

2 基础环境

2.1 安装 AndroidStudio 、gradle 等

参见环境配置一章

2.2 建立现有Android项目（如果你已有Android项目，此步聚可以跳过）

在硬盘上找个地方放置我们的工程，比如 rnDemo。

然后在里面分别创建 iOS, Android, rn 三个目录，就像这样：

1
2
3
4
rnDemo // 项目根目录
├── Android  // 存放安卓项目代码
├── iOS // 存放 iOS 项目代码
└── rn  // 存放 react-native 代码

然后我们在 Android 目录内新建一个Android项目（直接新建到Android根目录中）。

2.3 安装 react-native

使用命令行进入 rn 目录，运行 npm init 根据系统问的关于项目的问题回答之，便建立好了一个nodeJS项目，可以看到目录里多了一个package.json文件。

然后执行

1
2
npm install -s react
npm install -s react-native

关于nodeJS的内容，可以参考后面关于NodeJS的介绍。这里你只要知道一个react-native工程，其实就是一个NodeJS工程。NodeJS是JavaScript的运行时环境，提供JS的本地编译运行与打包等功能。而npm提供了NodeJS的依赖库管理，这就体现在package.json文件中，这个json文件记录了本NodeJS项目的信息，依赖库信息等。

我们看看最后生成的两个文件 package.json & node_modules

  • node_modules

node_modules是 NodeJS放依赖库的地方，我们下下来的 react-native库及他所依赖的库都放在 node_modules里面。每个库就是一个module，放在一个独立的文件夹里面。

  • package.json

这个上面介绍过了。 我们修改下pakcage.json让他变成这样（正式使用时，注释要去掉）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "MyRnDemo",  # 项目名
  "version": "1.0.0",  # 项目版本号
  "description": "My First react-native demo",  # 项目描述
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"  # 项目运行的脚本
  },
  "dependencies": {   # 本RN项目的依赖库，可以看到，这里依赖了 react 与 react-native
    "react": "^0.14.8",
    "react-native": "^0.25.1"
  },
  "author": "luochenxun",
  "license": "ISC"
}

其实有了这个package.json文件后，我们他日要升级 react-native 或是要添加其它库时，只要添加或修改到 dependencies内，然后把node_modules删之，最后在根目录直接运行 npm install 就行，npm会根据package.json中的依赖库信息，安装项目所有需要的依赖库。

3 安装Android依赖库

  • app’s build.gradle

在 app module 的 build.gradle中添加

1
2
文件头添加：apply from: "../../rn/node_modules/react-native/react.gradle"
在dependencies内添加 ： compile "com.facebook.react:react-native:+"

这样做主要目的是给app添加 react-native库支持。

  • project’s build.gradle

但是因为这些库要从我们刚装的rn目录取之，所以还要在 project的 build.gradle中修改 allprojects块为：

1
2
3
4
5
6
7
8
9
10
11
allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            // 注意这个路径是按照之前说的项目架构设的。如果你没按那个来，这个要改为对应rn项目module库的路径
            url "$projectDir/../../rn/node_modules/react-native/android"
        }
    }
}

Sync之后，可以发现依赖库中多了一些库，特别留意下react-native依赖库。

4 给Android添加rn相关代码

4.1 添加权限与注册 Manifest

在 manifest中添加rn所需权限：

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

增加一个设置的rn Activity：

1
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

4.2 修改 MainActivity

让MainActivity继承于ReactActivity。注意，getMainComponentName() 方法返回的是对应的 rn 模块的名字, 必须与我们后面定义的rn模块名一致！

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
public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "RnDemo";
    }

    /**
     * Returns whether dev mode should be enabled.
     * This enables e.g. the dev menu.
     */
    @Override
    protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

    /**
     * A list of packages used by the app. If the app uses additional views
     * or modules besides the default ones, add more packages here.
     */
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage()
        );
    }
}

我们可以看到，代码部分非常简单，就是继承一个 ReactActivity 并指定rn模块则可。React-Native库会自动帮我们把相应的rn模块装载进Activity之中。

5 启动rn

在终端进入rn目录，输入 npm start 开启本地服务

然后AS项目跑起来，就可以看到效果了。

如果你是在手机设备上运行，如果看不到效果，试下这个命令

1
adb reverse tcp:8081 tcp:8081

6 本章示例代码

1
https://github.com/luochenxun/react-native-happy-learn.git 分支名： chapter2.3

你可以这样拉下来：找个目录，然后敲

1
2
git clone -b chapter2.3 https://github.com/luochenxun/react-native-happy-learn.git rnProject
进入 rn 目录，执行  `npm install`