React Native

React Native学习笔记一:搭建开发环境

2019-03-05  本文已影响0人  IT前沿技术分享

React Native学习系列:
React Native学习笔记一:搭建开发环境
React Native学习笔记二:试水第一个项目
React Native学习笔记三:IDE的选择-VisualStudioCode
React Native学习笔记四:VSCode调试ReactNative项目
React Native学习笔记五:项目基本结构分析
React Native学习笔记六:IOS从OC更换成SWIFT
………………


一.简介

  React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

  React Native产出的并不是“网页应用”, 或者说“HTML5应用”,又或者“混合应用”。 最终产品是一个真正的移动应用,从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。

  这里讲一下在Mac OS 下搭建IOS的开发环境,环境必须要用的的软件及相关依赖有:Xcode及命令行工具、Node、Watchman 和 React Native

二.安装XCode及命令行工具

1.安装xcode

  这个不用太啰嗦,直接打开APStore 搜索并安装就OK

2.安装命令行工具

  这个也很简单,打开终端输入 xcode -select --install,进行安装,安装需要一段时间,请耐心等候,完成后就可以进行下一步了。

三. 安装相关依赖

  安装完xcode相关后,就需要安装相关的依赖了。

  开发环境必须安装的依赖有:

Node

  Node是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

Watchman

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

React Native

  React Native 这个就不啰嗦了。

1. 安装homebrew

  安装 Node 和 Watchman之前,首先要安装homebrew,它能在Mac中方便的安装软件或者卸载软件。

homebrew官网

  打开 homebrew,它会教你怎么安装,没错,就是这一句,把他拷贝到终端下,直接运行就OK

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

2. 安装Node 和 Watchman

  安装完homebrew后,就可以用它来安装node和Watchmanle ,直接在终端输入以下两行命令,分别回车即可,然后就是等待完成

brew install node 
brew install watchman

3. 配置npm镜像

  npm 是随同Node一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

 安装完 Node 后建议设置 npm 镜像以加速后面的过程,设置镜像方法:终端分别输入以下执行即可

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

4. 用npm下载安装React Native 的命令行工具

在终端执行以下:

npm install -g react-native-cli

  这里加 -g,表示作为全局依赖包进行安装,这样就可以在其它任何地方使用React Native。

四. 总结

  到这里,React Native 的开发环境就搭建好了,是不是很简单,下一个笔记将开始激动人心的建立第一个项目,并且跑起来在xcode 模拟器中预先起来,好期待。

上一篇下一篇

猜你喜欢

热点阅读