开发环境搭建 - 给Android开发者的React Nativ

2017-08-28 本文已影响242人 wenju_song

导语：

React Native是Facebook推出的基于React.js引擎的方便编写跨平台应用的一门语言，逐渐成为了眼下普通Android开发者要掌握的一门语言。Android开发目前属于饱和期，开发人员需要掌握Native开发应用，如果掌握React Native 这样一种跨平台，基于js语言的开发语言，在工作中多一种处理方法的思路，在求职中也就多一个筹码。
React Native已经在我们项目中得到了运用，这一系列的文章是从实际开发的角度给出易上手的React Native教程.

本教程分为以下的几个部分：

React-Native 开发环境搭建
React-Native 常用命令
React-Native 项目结构
用WebStorm 开发js
React 知识汇总
Es6 学习笔记
React-Native 知识点
React-Native 实现热更新
React-Native 相见恨晚的小技能
React-Native 底层分析
......

本教程基于Ubuntu 14.04，Widows平台和MacOs大同小异。

安装Node.js等工具

什么是node.js?

Node.js是一个基于Google V8引擎(Chrome javascript运行时)建立的平台用于方便地搭建响应速度快，易于拓展的网络应用。

安装 nvm（Node Version Manager，Node版本管理器）,通过nvm来安装node。

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash
source ~/.bashrc

3.使用nvm安装Node
首先查看服务器有哪些node版本

nvm ls-remote

安装对应版本：

nvm install v5.9.0

查看本地的node版本，如果node版本比较低，会在React-Native运行时出错。

nvm list

切换node版本到默认：

nvm alias default 0.10.32

4.安装yarn

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。

sudo npm install -g yarn

安装完yarn之后就可以用yarn代替npm了，例如用yarn 代替npm install命令，用yarn add xxx代替npm install --save xxx。

配置ANDROID_HOME

这里会使用 Gradle 进行编辑。编译过程中有可能会出现 Android sdk 找不到，Build tools 版本找不到的错误。这是因为 RN for Android 需要环境变量 ANDROID_HOME，在.bashrc下面添加：

export ANDROID_HOME=/usr/local/opt/android-sdk

开始第一个React Native程序

下面开始第一个React Native程序。运行如下几条命令，直接可以生成一个样例项目：

$ sudo npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject/

接下来就是激动人心的时候，插上手机或者打开模拟器，开始运行：

$ react-native run-android

手动启动server

有时候你运行 react-native run-android，发现并不能自动运行 dev server，你可以在当前项目目录中运行如下命令来手动启动 server：

$ react-native start

reload js

模拟器在键盘双击r。手机摇晃一下。电视点击menu键。

为Android5.0以下设置端口

首先确认设备和电脑在同一个网段。按 menu 键或者摇晃手机，在开发菜单中设置一下 dev server 的 IP 地址。如果不能打开这个菜单，开启 APP 的显示悬浮窗的权限。选择 Dev Settings-> Debug server host for device，填入电脑的 IP 地址和端口8081。

为常用命令配置快捷键

在.bashrc目录下添加

#react-native
alias rnrunandroid='react-native run-android'
alias rn='react-native'
alias rnstart='react-native start'
alias rnlist='lsof -i :8081'

这样的话在命令行里输入rn就表示react-native，这里和“ll"即"ls -al"类似。

这篇文章介绍了React Native的环境搭建以及第一个应用的运行。下一篇文章将介绍React-Native 常用命令。

关注微信公众号，有技术干货，有职场经验，有学习心得，有生活感悟。

songwenju