Ubuntu下搭建React Native环境

Ubuntu下搭建React Native环境

Node 安装

windows下我们可以直接从Nodejs官网下载安装包,双击安装;

linux下我们虽然也可以下载node源代码来安装,但推荐使用nvm来安装node,切换版本非常方便!

注: 用nvm安装完node后,可能每次启动一个终端,都会提示commond not found,我们需要执行以下命令:

$ nvm alias default stable

JAVA环境配置

React Native目前需要Android Studio2.0或更高版本,而Android Studio又需要JAVA环境,所以先来配置JAVA环境吧(如果已经安装了JAVA, 请跳过这一步,可通过java -version来查看当前java版本)!

1.我们先去JAVA官网下载所需的JDK。

2017-05-31 23-17-45屏幕截图.png

2.在/usr/local目录下新建java文件夹,并将下载的JDK复制到该文件夹下:

$ sudo mkdir /usr/local/java
$ sudo cp jdk-8u131-linux-x64.tar.gz /usr/local/java

3.解压源码

$ sudo tar xvf jdk-8u131-linux-x64.tar.gz

4.设置环境变量

$ sudo gedit /etc/profile
export JAVA_HOME=/usr/local/java/jdk1.8.0_25  # 配置jdk的主目录,此处根据JDK的路径来配置
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=${JAVA_HOME}/bin:$PATH

配置完成后执行命令source /etc/profile, 然后在终端输入java -version查看是否安装完毕:

2017-05-31 23-46-10屏幕截图.png

安装 Android Studio

1.下载Android Studio

2.解压下载到的安装包,cd 到bin文件夹下,执行./studio.sh命令,我们就能看到如下界面

2017-05-31 23-55-58屏幕截图.png

3.先不急着安装,按照React Native官网上来讲,我们需要在安装的时候做些改动(中文可以去React Native中文网查看)

2017-06-01 00-02-51屏幕截图.png

选择Android Virtual Device:

2017-06-01 00-04-04屏幕截图.png

然后就是漫长的等待他下载完毕啦:

2017-06-01 00-09-29屏幕截图.png

4.当下载完毕后,我们还需要下载一些SDK:

SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选Google APIsAndroid SDK Platform 23Intel x86 Atom System ImageIntel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image

SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1(必须是这个版本)。然后还要勾选最底部的Android Support Repository.

2017-06-02 00-07-28屏幕截图.png
2017-06-02 00-11-16屏幕截图.png

5.当SDK下载好后,我们还需要配置ANDROID_HOME环境变量:

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。

具体的做法是把下面的命令加入到~/.profile文件中。如果你使用的是其他的shell,则选择对应的配置文件:

# 如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。
export ANDROID_HOME=${HOME}/Android/Sdk

然后使用下列命令使其立即生效(否则重启后才生效):

source ~/.profile

可以使用echo$ANDROID_HOME检查此变量是否已正确设置。

  1. 将Android SDK的Tools目录添加到PATH变量中,以便在终端中运行一些Android工具,在~/.profile文件中添加:

export PATH=${PATH}:${ANDROID_HOME}/tools

export PATH=${PATH}:${ANDROID_HOME}/platform-tools

安装React Native命令行工具


$ npm install -g react-native-cli

由于一些大家都懂的原因,在国内下载npm包比较慢,还好我们可爱的淘宝帮我们备份了npm源:

# 此条命令将npm源设置成国内淘宝提供的镜像,速度更快哦
$ npm configsetregistry https://registry.npm.taobao.org

当然如果你使用yarn,可以这么设置:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安装完后,我们就可以来尝试构建第一个项目了:

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

有时候往往应该先运行以下命令:

$ react-native start

如果一切顺利,你将会在机器上看到一下这张图:D

2017-06-03 00-13-12屏幕截图.png

优化开发效率

watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。

执行以下命令安装watchman:

git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.7.0# 这是本文发布时的最新稳定版本
./autogen.sh
./configure
make
sudo make install

安装错误解决

1.安装watchman时如果提示如下信息:


./autogen.sh: 9: ./autogen.sh: aclocal: not found

./autogen.sh: 10: ./autogen.sh: autoheader: not found

./autogen.sh: 11: ./autogen.sh: automake: not found

./autogen.sh: 12: ./autogen.sh: autoconf: not found

丢失的aclocal是automake包的一部分,因此要先安装automake:


$ sudo apt-get install automake

2.安装watchman时如果提示如下信息:


fatal error: Python.h: 没有那个文件或目录

需要安装python-dev:


$ sudo apt-get install python-dev

Gradle Daemon

开启Gradle Daemon可以极大地提升java代码的增量编译速度。

1.下载Gradle,将其解压到/usr/local/opt目录下

2.在/etc/profile文件中添加如下配置:


export GRADLE_HOME=/usr/local/opt/gradle-3.5

export PATH=$PATH:$GRADLE_HOME/bin

3.执行source /etc/profile使之生效

4.执行gradle -v确定安装成功

5.配置gradle deamon


$ touch~/.gradle/gradle.properties&&echo"org.gradle.daemon=true">>~/.gradle/gradle.properties

安装Genymotion

比起Android Studio自带的原装模拟器,Genymotion是一个性能更好的选择。

Genymotion需要提前安装好virtualbox

用命令行安装更为方便:


$ wget -q https://www.virtualbox.org/download/oracle_vbox.asc -O-|sudo apt-key add -

$ sudo apt-get update

$ sudo apt-get install virtualbox

之后我们从Genymotion官网下载Genymotion并安装:

$ chmod +x genymotion-2.9.0-linux_x64.bin
$ sudo ./genymotion-2.6.0-linux_x64.bin -d ~

进入到~/genymotion目录下,执行./genymotion来启动

结束语

鄙人不是什么大牛,文章若有错误之处,敬请指出,与君共勉!

参考资料

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,392评论 25 707
  • 尽管在移动开发中,原生APP的开发成本很高,但现阶段基于原生开发仍然是必须的,因为Web的用户体验仍无法超越Nat...
    奔跑的大橙子阅读 5,386评论 0 11
  • 从2017年元旦后加入了行动派的郑州群,继而加入了绘画小组。 学习手绘的初衷,就是为了学习色彩搭配技巧,把思维导图...
    知予君阅读 530评论 4 14
  • 今天我们的老师没有来,我们自习了一天。老师给我们布置了作业,但是我们的作业都是没有讲过的,所以也没有办法做,只能自...
    宋肖鹏阅读 176评论 0 0
  • 画节有感 客别三年到潍坊,东风不改旧模样。 街柳依稀抽嫩绿,花絮随性自飞扬。 中国画节邀高士,艺坛峰会聚新创! 闭...
    逸塵居士阅读 236评论 0 1