概述
前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境。
配置mac开发环境
基本环境安装
1.先安装Homebrew:用于安装NodeJS和其他工具。
注:Homebrew详解,对这个比较了解的略过,我也是用mac没多久,这里给小白普及下。
Homebrew全称Homebrew is the easiest and most flexible way to install the UNIX tools Apple didn’t include with OS X。是一个包管理器,用于在Mac上安装一些OS X没有的UNIX工具(比如著名的wget),Homebrew将这些工具统统安装到了 /usr/local/Cellar 目录中,并在 /usr/local/bin 中创建符号链接。
安装Homebrew:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- 1
然后一路回车
最后出现success,就表示安装成功了。
安装完成后,可以用brew doctor命令检测下是否有什么冲突的地方。关于Homebrew其他的介绍可以自行查看官网资料。
安装 Node.js
React Native 需要 NodeJS 4.0或更高版本,Homebrew的Node默认包是6.0版本的,所以直接安装即可:
brew install node
- 1
安装React Native 命令行工具npm
之前我们说过npm是一个包管理工具,它是用来管理node的,详细介绍请看npm详解
命令行工具可以轻松创建和初始化工程:
npm install -g react-native-cli
- 1
注:如果出现错误 :EACCES: permission denied,使用命令: sudo npm install -g React-native-cli.
安装Yarn
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
- 1
其他建议安装
Watchman
Whtchman是Facebook开发的一个检测文件系统变化的工具,在RN开发中可以检测js文件等是否有变化,从而达到保存及编译的效果。这个在windows中也有,个人觉得可装也可以不装,直接手机上reload也是可以的。
brew install watchman
- 1
Flow
静态类型检查工具
brew install flow
- 1
Nuclide
Facebook推出的一款React Native集成开发环境(IDE),不过我不太喜欢,我一般用webstorm+Android/ios 的ide。
快速开发React Native
每次学习一门新的语言,我们总是总喜欢来一个helloWord。
react-native init HelloWord
cd HelloWord
react-native run-ios
- 1
- 2
- 3
- 4
- 5
注:也可以用Xcode打开iOS/HelloWord.xcodeproj 并点击Run按钮。
小提示:react-native命令行从npm官方源拖代码时会遇上麻烦。请将 npm仓库源替换成淘宝的:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
- 1
- 2
- 3
关于在mac上怎么搭建Android的运行环境这里不在讲解,大家可以看看我之前的文章React 和Android的整合,这篇文章也是补了之前RN在windows环境下开发,而没有在mac下开发,后面我们将讲解怎么在mac上开发一款RN应用。
相关推荐
windows环境下Android的ReactNative开发环境搭建
在 React Native 中利用现有的 JavaScript 和 React 知识,就可以开发和部署功能完备的、真正原生的移动应 用,并同时支持 iOS 与 Android 平台。除了框架本身的概念讲解之外,本书还讨论了如何使用第三 方库,以及...
在windows搭建RN环境
第1课1、手把手教React Native实战之环境搭建【Mac真机】同时调试开发Android&IOS; 第2课2、手把手教React Native实战之从React到RN 第3课3、手把手教React Native实战之flexbox布局(RN基础) 第4讲4、手把手教React ...
3.1 搭建环境 13 3.2 创建一个新的应用 17 3.3 探索示例代码 24 3.4 开发天气应用 27 3.5 小结 40 第4章 移动应用组件 42 4.1 类比HTML 元素与原生组件 42 4.2 处理触摸和手势 46 4.3 使用结构化组件 58 ...
基于ReactNative开发的仿网易新闻APP.zip 基于ReactNative开发的仿网易新闻APP.zip 基于ReactNative开发的仿网易新闻APP.zip 基于ReactNative开发的仿网易新闻APP.zip 基于ReactNative开发的仿网易新闻APP.zip 基于...
一个基于react native开发的完整项目示例
本文介绍了VSCode 配置React Native开发环境的方法,分享给大家,具体如下: 1.安装VSCode 2.安装插件 按F1 并输入 ext install 并回车, 或者使用 输入react-native安装React Native Tools 假定你已经在设备上...
快速搭建React Native项目的一个starter
React Native By Example by Richard Kho English | 24 Apr. 2017 | ASIN: B01M31KB4Q | 414 Pages | AZW3 | 4.46 MB Key Features Work on native APIs and UI Elements using React Native Get the best of both...
React-Native开发实例,带你入门react-native开发
ReactNative开发入门,非常适合React Native入门的猿类
mac端可视化调试react或者reactnative工具,可以调试redux应用状态
全套ReactNative开发视频,请去此资源所属专辑,内有全部视频!!!!!
React Native开发的食谱应用程序
React Native 开发指南(完整版).pdf,扫描的很清晰,希望对大家有用。
安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行react-native 此时可能出现 如下界面,这是因为没有配置运行文件 在...
使用react native开发的一个one客户端
为 React Native 带来 NFC 功能。灵感来自phonegap-nfc和react-native-ble-manager 该库最简单(也是最常见)的用例是读取NFC包含 的标签NDEF,可以通过以下代码实现: import React from 'react'; import {View, ...