在ubuntu上进行React-Native开发之环境搭建
在ubuntu上进行React-Native开发
1.开发环境的搭建
概念解读:
Node.js是一个基于Google V8引擎(Chrome javascript运行时)建立的平台
用于方便地搭建响应速度快，易于拓展的网络应用
NVM是nodejs版本管理工具.可以在多个nodejs版本中进行切换,降低了升级nodejs时的成本
NPM是nodejs软件包管理工具,可以方便的安装node相关的外部库
1.安装node
从https://nodejs.org/en/download/ 下载LTS版本的Source Code的tar.gz包
按照https://github.com/nodejs/node#build
所示安装好相关依赖,并编译安装node
完成后
node -v 显示当前node的版本
npm -v 显示当前npm的版本
2.安装NVM
获取NVM
git clone https://github.com/creationix/nvm.git
clone完成后,进入目录直接执行./install.sh
安装完成后输入nvm如果没有提示,就执行source ./nvm.sh
查看NVM版本 nvm --version
查看NVM帮助 nvm -h
通过nvm ls查看当期已经安装的node或者iojs版本
通过nvm ls-remote查看当前可以安装的node或者iojs版本
通过nvm install v0.21.7安装指定版本的nodejs
通过nvm uninstall v0.21.7安装指定版本的nodejs
通过nvm use v0.21.7切换使用的nodejs版本
3.安装watchman
先安装依赖
sudo apt-get install autoconf automake python-dev python3-dev
顺利完成依赖环境后,
git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.3.0 # the latest stable release 选择最新的版本
./autogen.sh
./configure
make
sudo make install
安装还是比较顺利的
4.安装flow
按照http://flowtype.org/docs/getting-started.html 所示即可完成flow的安装
flow version 会显示flow的版本,
例如 Flow, a static type checker for JavaScript, version 0.21.0
5.安装react-native
npm install -g react-native-cli
过程会比较长,而且要保证网络通畅(科学上网)
6.创建react-native项目(项目名为Demo)
react-native init Demo
过程会耗时较长(看电脑性能和网络通畅)
7.运行项目
在创建Demo完成后,进入项目目录
react-native -v 可以显示当前react-native的版本,如下:
react-native-cli: 0.1.10
react-native: 0.19.0
这时使用 react-native start 运行Demo项目
在编写调试代码的过程中保持此窗口的,
即启动server, 如果没有启动server
会报错React Native: ReferenceError: Can't find variable: require (line 1 in the generated bundle)
窗口会显示相关的log信息
8.开发ios程序
直接用Xcode打开ios目录下的.xcodeproj文件夹
9.开发Android程序
相比ios,android要更为麻烦些
1.安装jdk,并配置环境变量
2.安装Android Studio
3.安装Android SDK
4.配置SDK的环境变量
5.安装genymotion模拟器(建议多使用真机)
因为这是在ubuntu下开发Android,考虑到用户权限
要分别在/etc/profile和.bashrc文件中写入环境变量
并执行source .bashrc使环境变量生效
环境变量如下,路径略做修改即可
# set jdk environment
export JAVA_HOME=/usr/lib/jvm/jdk1.8.0_60
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=${JAVA_HOME}/bin:$PATH
#set android sdk tools environment
export ANDROID_HOME=/home/uxstone/android/sdk/
export PATH=$PATH:$ANDROID_HOME/platform-tools/
10.运行Andorid项目
可以使用模拟器可以使用真机(注意要保证react-native运行的Server和Andorid程序在同一个网络环境下)
在Demo项目目录下,执行react-native run-android 即可打包编译APK了
正常运行屏幕会显示Welcome to React Native 点击菜单健(真机可以摇一摇)显示相关调试按钮
在这里要介绍如何把真机和Server相连
在弹出的调试菜单中的Dev Settings中的Debug Server host中写上Server端的ip地址+端口,例如 192.168.0.1:8081
端口是在React Native 的Server开头显示的
在编码调试过程中一定不能关闭Server窗口(即第７步中react-native start命令的那个窗口)