React Native入门之环境配置

时间:2021-10-06 17:16:07

React Native入门之环境配置

安装

推荐使用Homebrew的方式安装nvm、watchman 和 flow。
1.安装Homebrew

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2.安装nvm(Node Version Manager) 和 node
Node 是一个基于 Chrome V8 的一套开源 Javascript 运行时环境,他提供了在命令行直接执行 Javascript 代码的能力,帮助我们使用 Javascript 完成更多的任务。而 NVM 则是Node的包管理工具。

brew install nvm // 安装nvm

执行完上述命令之后,会给出一些提示信息,根据提示信息执行下列命令

mkdir ~/.nvm
echo "export NVM_DIR=~/.nvm" >> ~/.zshrc
echo "source $(brew --prefix nvm)/nvm.sh" >> ~/.zshrc
source ~/.zshrc // 应用上面的配置

使用nvm安装node

nvm install node && nvm alias default node // 安装node

3.安装watchman
watchman:a file watching service。提供文件观察服务。

brew install watchman

4.安装flow
flow是一个用来做javascript类型检查的工具。

brew install flow

5.安装npm
npm提供给javascript开发人员进行轻松地分享和代码重用,也很容易地进行更新分享的代码。

npm install -g react-native-cli // 安装react-native控制台工具

从hello world开始

react-native init {工程名字} // 创建一个RN工程

进入工程目录,利用Xcode中打开ios/*.xcodeproj 点击运行该工程。
在工程目录下的index.ios.js是iOS工程对应的js,编辑index.ios.js实现功能要求。
可以使用webstorm工具打开工程,编辑js文件。

当使用Xcode运行工程时,可能会出现红色框提示加载js,此时需要在工程所在目录下运行命令:
react-native start // 手动开启server,用于生成js bundle