开始本章之前,仍然不厌其烦地啰嗦几句,本章节基于苹果的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应用最终效果。
本章示例代码
https://github.com/luochenxun/react-native-happy-learn.git 分支名: chapter2.3
你可以这样拉下来:找个目录,然后敲
git clone -b chapter2.3 https://github.com/luochenxun/react-native-happy-learn.git rnProject
进入 rn 目录,执行 `npm install`
基础环境
安装 AndroidStudio 、gradle 等
建立现有Android项目(如果你已有Android项目,此步聚可以跳过)
在硬盘上找个地方放置我们的工程,比如 rnDemo。
然后在里面分别创建 iOS, Android, rn 三个目录,就像这样:
rnDemo // 项目根目录
├── Android // 存放安卓项目代码
├── iOS // 存放 iOS 项目代码
└── rn // 存放 react-native 代码
然后我们在 Android 目录内新建一个Android项目(直接新建到Android根目录中)。
安装 react-native
使用命令行进入 rn 目录,运行 npm init
根据系统问的关于项目的问题回答之,便建立好了一个nodeJS项目,可以看到目录里多了一个package.json文件。
然后执行
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让他变成这样(正式使用时,注释要去掉):
{
"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中的依赖库信息,安装项目所有需要的依赖库。
安装Android依赖库
- app’s build.gradle
在 app module 的 build.gradle
中添加
文件头添加: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块为:
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依赖库。
给Android添加rn相关代码
添加权限与注册 Manifest
在 manifest中添加rn所需权限:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
增加一个设置的rn Activity:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
修改 MainActivity
让MainActivity继承于ReactActivity。注意,getMainComponentName() 方法返回的是对应的 rn 模块的名字, 必须与我们后面定义的rn模块名一致!
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之中。
启动rn
在终端进入rn目录,输入 npm start
开启本地服务
然后AS项目跑起来,就可以看到效果了。
如果你是在手机设备上运行,如果看不到效果,试下这个命令
adb reverse tcp:8081 tcp:8081
本章示例代码
https://github.com/luochenxun/react-native-happy-learn.git 分支名: chapter2.3
你可以这样拉下来:找个目录,然后敲
git clone -b chapter2.3 https://github.com/luochenxun/react-native-happy-learn.git rnProject
进入 rn 目录,执行 `npm install`