红联Linux门户
Linux帮助

React-Native开发之Ubuntu16.04配置环境

发布时间:2016-10-30 15:18:16来源:blog.csdn.net/zhongyanfu0作者:Maze-Mozo
在近几年的互联网中,React-Native技术算是比较新潮的技术,但是必须要有Nodejs的支持。终归还是回到了JavaScript脚本语言,这也是使得RN(React-Native)如此的火,也是全栈式的开发,这种类似的开发,让我想起了XAML和Qml,当然这式另外话题,我在这里就不扯远了,开始正题。
 
1.我们需要到AndroidStudio的安装,在开发中我还是建议版本用2.0以上(我用的是2.2的版本)。
 
2.那我们从下载AndroidStudio开始。首先我们去下载AndroidStudio,国内的地址:http://www.android-studio.org/
还有我们的JDK要下载,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
至于AndroidSDK还是安装好AndroidStudio在安装SDK,为了保持SDK的完整性我是建议这么做,但是你要做好fanqiang的准备!
 
3.我们先来安装和配置JDK的环境变量
jdk-8u111-Linux-x64.tar.gz下载好了以后的文件名,在解压之前我们要做的工作就是用命令建文件夹使JDK安装到规定的地方。在终端输入一下命令
sudo  mkdir /usr/lib/jvm
tar zxvf ./jdk-8u92-linux-x64.tar.gz -C /usr/lib/jvm
这两步就是把JDK解压并移动到规定的文件夹内
 
4.其次我们在新建一个终端,命令如下
cd /
gedit ~/.bashrc
React-Native开发之Ubuntu16.04配置环境
如上图,我们在编辑器的最后面另起一行复制一下命令
export ANDROID_HOME='/home/jafer/Android/Sdk'
export JAVA_HOME='/usr/lib/jvm/jdk1.8.0_111'
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=${JAVA_HOME}/bin:$PATH
然后保存即可。
 
5.另外我们还要配置一下另外一个环境,输入一下命令
sudo gedit /etc/profile
然后在编辑器的最后面复制一下代码进去
export JAVA_HOME=/usr/lib/jvm/jdk1.8.0_111
export CLASSPATH=.:$JAVA_HOME/lib:$JAVA_HOME/jafer/lib
export PATH=$JAVA_HOME/bin:$JAVA_HOME/jafer/bin:$PATH
export PATH=$PATH:/home/jafer/Android/Sdk/platform-tools/
export PATH=$PATH:/home/jafer/Android/Sdk/tools/
React-Native开发之Ubuntu16.04配置环境
如上图保存即可。
 
6.我们再一次打开新的终端输入一下命令
sudo update-alternatives --install /usr/bin/java java /usr/lib/jvm/jdk1.8.0_91/bin/java 300
sudo update-alternatives --install /usr/bin/javac javac /usr/lib/jvm/jdk1.8.0_91/bin/javac 300
 
7.我们再把AndroidStudio解压,在其所在的文件夹下解压,输入一下命令
sudo unzip android-studio-ide-145.3276617-linux.zip
React-Native开发之Ubuntu16.04配置环境
这里我就不做演示了。然后我们把解压的文件夹移到/opt目录下,用终端将其复制进去,使用sudo的命令。
cp -r android-studio /opt
然后我们再执行下一步操作,打开全新的终端输入一下命令
cd /opt/android-studio/bin/
sudo ./studio.sh
安装的过程中提示要找到SDK的提示窗口,你只要选择Cancel的按钮即可,为了后续的SDK完整我们只能这么做。
 
8.安装好了以后,出来界面以后,我们点右下角打开设置,勾选我们所需要的SDK,AndroidStudio会自行下载并安装,我们只要把VPN挂在那里就好了
React-Native开发之Ubuntu16.04配置环境
还有SDK工具(SDK Toos)如下图的
React-Native开发之Ubuntu16.04配置环境
还有必须安装的23.0.1也勾上,好了我们,点击Ok即可。
React-Native开发之Ubuntu16.04配置环境
 
9.接下来我们才正式安装React-Native的以便完美的支持开发
1).安装node,打开新的终端,并输入一下命令
sudo apt-get install -y nodejs
sudo ln -s /usr/bin/nodejs /usr/bin/node
安装好了以后,我们检测一下安装是否成功,如果出现如下图,那就说明成功了
React-Native开发之Ubuntu16.04配置环境
2).接下来安装watchman,我们再新开一个终端输入一下命令
sudo apt-get install -y automake python-dev
git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.5.0  # the latest stable release
./autogen.sh
./configure
make
sudo make install
3).安装flow,我们再全新打开一个终端,输入一下命令
sudo npm install -g flow-bin
这个过程中你可能需要npm,因为没有安装,系统的终端会提示你,那么你输入,下面一行命令,即可解决问题
sudo apt-get install npm
 
10.最后安装的步骤,安装React-Native,按照以下命令在终端里面实行安装
sudo npm install -g react-native-cli
 
11.接下来我们可以尝试性的链接手机,同样的新开终端输入命令
lsusb
React-Native开发之Ubuntu16.04配置环境
如上图,这里显示的就是我的电脑链接的所有的设备
 
11.我记住了自己的手机ID以后输入一下命令,实行手机授权以便手机调试开发
React-Native开发之Ubuntu16.04配置环境
我这里就得到了手机授予电脑权限。
 
12.我们检测一下是否得到授权后,链接手机是否成功,继续输入命令
adb devices
React-Native开发之Ubuntu16.04配置环境
 
13.全部的安装就是这样完成了,那么我们现在就来创建项目
react-native init MyEorrTest
React-Native开发之Ubuntu16.04配置环境
上图是创建成功项目的截图
 
14.同时我们还要新建一个终端,来处理一下手机端口
adb reverse tcp:8081 tcp:8081
 
15.不仅可以在手机上调试,我们还可以在电脑端实行调试,同样是新的终端,如下命令
cd MyEorrTest
react-native start
 
好了一整个过程就这么的完成了。
 
本文永久更新地址:http://www.linuxdiyf.com/linux/25545.html