在ubuntu上进行React-Native开发之环境搭建

Posted 2020-08-01 stewartlj

在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命令的那个窗口)