美文网首页
Ubuntu下搭建React Native环境

Ubuntu下搭建React Native环境

作者: 斑驳的天空 | 来源:发表于2017-07-01 23:12 被阅读0次

    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来启动

    结束语

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

    参考资料

    相关文章

      网友评论

          本文标题:Ubuntu下搭建React Native环境

          本文链接:https://www.haomeiwen.com/subject/xbtbcxtx.html