爽爆天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`
坚持原创技术分享,您的支持将鼓励我继续创作!