美文网首页
macOS&iOS平台下的RN搭建开发环境

macOS&iOS平台下的RN搭建开发环境

作者: 测试开发雨辰 | 来源:发表于2019-05-14 14:23 被阅读0次

安装依赖

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

Node,Watchman

推荐使用Homebrew来安装Node和Watchman。在命令行中输入以下命令行来安装。

brew install node
brew install watchman

如果已经安装了Node,请检查其版本是否在 v10 以上。命令行node -v即可查询安装版本。安装完Node后建议设置npm镜像以加速后面的过程。

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

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://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 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 某第三方库名。

Xcode

Xcode是一般iOS开发者必装的软件,但是开发人员要检查下自己Xcode版本,是否是Xcode9.4(包含9.4)以上版本哦

Xcode的命令行工具

启动 Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。

创建新项目

使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目:
注意:init 命令默认会创建最新的版本,而目前最新的 0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功,导致很多人无法运行iOS项目!!!中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦,又没有对新版本的需求,那么可以暂时创建0.44.3的版本。

react-native init AwesomeProject

提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

编译并运行 React Native 应用

进入项目目录,运行react-native run-ios:

cd AwesomeProject
react-native run-ios

提示:如果 run-ios 无法正常运行,请使用 Xcode 运行来查看具体错误(run-ios 的报错没有任何具体信息)。
会启动iOS模拟器(默认是iPhoneX)自动启动运行项目。如下图:

RN Running.gif
修改项目

现在已经成功运行了项目,我们可以开始尝试动手改一改了:

  • 使用自己喜欢的编辑器(我使用的是WebStorm)打开App.js并随便改上几行。
  • 在 iOS 模拟器中按下⌘-R就可以刷新 APP 并看到你的最新修改!(如果没有反应,请检查模拟器的 Hardware 菜单中,connect hardware keyboard 选项是否选中开启)

相关文章

  • macOS&iOS平台下的RN搭建开发环境

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

  • React Native开发流程

    RN开发流程 目标: 3月1日—4月14日,熟悉整套开发流程,并输出文档教程。 RN环境搭建 RN环境搭建请参考以...

  • RN学习记录

    了解RN 2018-2-8 (3h)搭建环境 搭建了Mac下的Android和iOS的开发环境环境搭建 2018-...

  • React-Native混编学习

    本篇主要涉及的是App和RN的混合开发环境搭建,对于基本的RN环境搭建请自行查阅文档。 这里需要着重注意的是全局依...

  • clojurescript前端实战-react-native项目

    步骤 创建工程 准备工作(搭建react-native开发环境搭建开发环境) 创建一个rn工程 react-nat...

  • RN开发环境搭建

    RN环境有两种:原生环境和简易沙盒环境,沙盒环境大量依赖国外网络环境,不能直接发布应用,只适用于学习、演示。原生环...

  • RN搭建开发环境

    RN搭建开发环境 1.安装依赖软件: Node.js 8.3以上 D:\Progr...

  • RN 开发环境搭建

    声明:此文不止步于RN开发环境的搭建,当我写这篇文章时其实已浏览过RN 官方绝大部分文档和做RN开发所具备的技能。...

  • React Native入门三<第一个React Nati

    上一章已经讲了如何搭建开发环境,如果你还不清楚如何搭建环境请先移步搭建开发环境,现在就来使用RN开发出你的第一个H...

  • 将RN项目集成到你的项目-iOS

    关于RN的环境搭建请参考搭建开发环境,最好自己创建了AwesomeProject,因为有些配置文件可以直接从Dem...

网友评论

      本文标题:macOS&iOS平台下的RN搭建开发环境

      本文链接:https://www.haomeiwen.com/subject/ovgjaqtx.html