前言:
作为一名原生iOS开发,最近面临换工作。在求职中发现很多公司需求中,需要有跨平台开发经验。市场变化太快,为适应市场需求,开始学习React-Native开发。之所以选择RN,是因为我有H5和小程序开发经验,学习成本较低。
1.查看是否安装了HomeBrew
使用brew 命令查看电脑是否安装了HomeBrew
brew -v 查看HomeBrew版本
如果显示 command not found 则是未安装HomeBrew,先进行HomeBrew的安装。
安装命令:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
也可自行去HomeBrew官网查看安装命令
官网地址:https://brew.sh
安装过程需要你输入一次回车,之后还会需要你输入密码,根据提示操作即可。
安装成功显示:
2.替换HomeBrew镜像源(如果第三步,note无法安装成功,再尝试替换镜像源)
遇到无法下载node情况,更新HomeBrew,然而HomeBrew update 无法更新,提示xcode 版本太低outdate,但本地xcode已经更新到xcode10
解决方法:替换HomeBrew镜像源
使用中科大的镜像替换默认源
- cd "$(brew --repo)"
- git remote set-url origin https://mirrors.ustc.edu.cn/brew.git
- cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
- git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git
- brew update
3.安装node
brew install node
brew install watchman
watchman 可以选择不安装,如果自己安装的有python,可能导致安装不成功
(Watchman是 facebook 的一个开源项目,它开源用来监视文件并且记录文件的改动情况,当文件变更它可以触发一些操作,例如执行一些命令等等。)
查看是否安装成功
node -v
watchman -v
注意:如果你已经安装了 Node,请检查其版本是否在 v8.3 以上
安装完 Node 后建议设置 npm 镜像以加速后面的过程(不然只能科学上网),依次执行下面两个命令即可
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
4.安装yarn和react-native-cli
Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载
npm install -g yarn react-native-cli
安装完后同样设置镜像源
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名。
5.创建RN项目
cd /Users/ye/Desktop/RNProject
react-native init RNProject
此时会在命令行窗口的所在的文件目录下创建一个名为RNProject项目,想要指定文件创建的位置,要在创建前改变命令行窗口的当前目录,就可以实现指定文件夹了
6.运行项目
- cd /Users/ye/Desktop/RNProject
- react-native run-ios
此时首次编译运行会比较久,也可以直接找到iOS项目文件,直接用xcode 运行,速度会比较块
运行成功后会弹出一个新的命令行窗口,这个窗口相当于本地服务器,运行项目期间不要关闭
好了,到此RN开发的运行环境已经搭建完毕,但还不可以愉快的开发,如果你使用webstrom当开发工具,那么希望下篇对你有帮助。下篇文章将讲述webstorm的开发环境配置。
文章地址