React-Native Mac环境搭建以及工具配置

前言:
       作为一名原生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

image.png

安装过程需要你输入一次回车,之后还会需要你输入密码,根据提示操作即可。

安装成功显示:

image.png
2.替换HomeBrew镜像源(如果第三步,note无法安装成功,再尝试替换镜像源)

遇到无法下载node情况,更新HomeBrew,然而HomeBrew update 无法更新,提示xcode 版本太低outdate,但本地xcode已经更新到xcode10

解决方法:替换HomeBrew镜像源
使用中科大的镜像替换默认源

  1. cd "$(brew --repo)"
  2. git remote set-url origin https://mirrors.ustc.edu.cn/brew.git
  3. cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
  4. git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git
  5. 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.运行项目
  1. cd /Users/ye/Desktop/RNProject
  2. react-native run-ios

此时首次编译运行会比较久,也可以直接找到iOS项目文件,直接用xcode 运行,速度会比较块

image.png

运行成功后会弹出一个新的命令行窗口,这个窗口相当于本地服务器,运行项目期间不要关闭


image.png

       好了,到此RN开发的运行环境已经搭建完毕,但还不可以愉快的开发,如果你使用webstrom当开发工具,那么希望下篇对你有帮助。下篇文章将讲述webstorm的开发环境配置。
文章地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容