React-native入门(一)----环境搭建

862 阅读3分钟

环境搭建参考

这里选用mac为例,详细可以见react-native中文网

安装依赖

必须安装的依赖有:Node、Watchman 和 React Native 命令行工具以及 Xcode。

虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Xcode 来获得编译 iOS 应用所需的工具和环境。

Node, Watchman 我们推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装:

brew install node

brew install watchman

如果你已经安装了 Node,请检查其版本是否在 v10 以上。安装完 Node 后建议设置 npm 镜像以加速后面的过程(或使用科学上网工具)。

注意:不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!

npm config set registry registry.npm.taobao.org --global

npm config set disturl npm.taobao.org/dist --global

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。

Yarn、React Native 的命令行工具(react-native-cli)

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

安装完 yarn 后同理也要设置镜像源:

yarn config set registry registry.npm.taobao.org --global

yarn config set disturl npm.taobao.org/dist --global

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名。

创建新项目

使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目,init 命令默认会创建最新的版本。

react-native init AwesomeProject

若要指定版本号:

react-native init MyApp --version 0.44.3 //注意版本号必须精确到两个小数点。

编译并运行 React Native 应用

如果要创建 typescript 版本,则可以运行下面命令

react-native init MyApp --template typescript

进入到新创建的目录

cd AwesomeProject

执行启动命令

react-native run-ios

有或者使用xcode直接运行

此过程中会启动一个命令窗口,可以查看rn项目的运行情况,不能关闭(如果嫌碍事,可以在js代码编译器,webstrom或者vscode的终端中执行npm start或者yarn start来启动,然后在run即可)

提示:如果 run-ios 无法正常运行,请使用 Xcode 运行来查看具体错误(run-ios 的报错没有任何具体信息)。

开发工具为js编辑器可以选用自己喜欢的vccode或者webstrom等

调试

模拟器调试快速刷新快捷键cmd + r(Android中按两次r)

真机类似微信摇一摇即可刷新

如果习惯了web的网页调试,可以在模拟器中cmd + r 选择start remote JS 即可,网页的控制台打开即可

注意xcode中也有打印吆

模拟器操作命令

查看当前可用的所有设备/模拟器列表:

在终端中输入xcrun simctl list devices

iPhone模拟器启动(下次启动会默认使用最后一次选择设备,直接启动 react-native run-ios 即可):

react-native run-ios --simulator "iPhone 7 Plus”

上面的过程中如果有什么问题,可以去中文网查看吆