概述
前面我们介绍过在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应用。
相关推荐
第1课1、手把手教React Native实战之环境搭建【Mac真机】同时调试开发Android&IOS; 第2课2、手把手教React Native实战之从React到RN 第3课3、手把手教React Native实战之flexbox布局(RN基础) 第4讲4、手把手教React ...
1. React Native开发环境搭建 - 安装Homebrew:Homebrew是一个Mac系统的包管理器,用于安装开发工具和库。 - 安装io.js:io.js是JavaScript运行时环境,可以用于运行React Native的JavaScript代码。 - 安装...
1. React Native的入门设置,包括在Mac、Linux(Ubuntu)和Windows上的环境搭建。对于不同操作系统,设置步骤可能会有所不同,因此开发者需要根据自己的操作系统进行相应的配置。 2. 通过“HelloWorld”应用的创建,...
1. **系统要求**: 开发React Native应用需要准备一个装有Node.js的开发环境。对于Windows用户,可能还需要安装Python 2.7和Visual Studio。对于Mac用户,推荐使用Homebrew来安装必要的开发工具链。 2. **安装Node....
- 安装React Native所需的依赖,包括Mac+iOS+Android开发环境。 - 配置Atom或Nuclide编辑器。 - WebStorm配置。 - **React Native中的样式使用**: - 介绍CSS的基础概念。 - 比较Web端CSS与React Native CSS的...
使用React Native开发的原生app:react native + react-navigation + redux + native-base + axios 技术栈 react @16.0.0 react-navigation @1.5.2 redux native-base axios es6 + babel 使用了create-react-native-...
总之,搭建React Native开发环境需要安装必要的软件和工具,并配置好开发环境。同时,学习JavaScript ES6、React基础和Redux等知识是必不可少的。掌握这些,你就可以开始在React Native平台上开发原生移动应用了。
2. **React Native环境搭建**:设置开发环境是开始学习React Native的第一步,包括安装Node.js、npm、Watchman、Homebrew(仅限Mac)、JDK、Android Studio(或Xcode)以及React Native命令行工具。 3. **React ...
搭建开发环境文件网址Mac OS-IOS节点和守望者brew install nodebrew install watchmanXcode和CocoaPods sudo gem install cocoapods运行您的React Native应用程序npx react-native start开始你的申请npx react-...
【Weex开发环境搭建】 Weex是由阿里巴巴在2016年6月开源的一款移动端跨平台开发工具。它旨在提供接近原生应用性能的同时,利用JavaScript语法实现对iOS、Android和Web三端的兼容,从而解决移动应用频繁发版和多端...
开发人员可以按照文中的步骤来安装和使用android-emulator-m1-preview,解决相关的问题,并且搭建一个完整的react-native环境。 知识点: 1. Mac本M1芯片无法使用Android模拟器的原因 2. android-emulator-m1-...
react-native run-ios(run-android) 服务端:具体看下面说明 1、express开发 1.1 npm环境设置 安装node软件: 安装淘宝滤镜:npm install -g cnpm --registry = 设置全局的npm从国内下载资源, npmrc添加配置。mac...
- **Web开发工具**:介绍了在MAC环境下设置Web开发环境所需的基本工具,如Web服务器配置等。 - **WebView技术**:探讨了WebView技术及其在混合应用中的作用。 - **WKWebView详解**:详细分析了WKWebView相比...
react-native run-ios(run-android) 服务端:具体看下面说明 1、express开发 1.1 npm环境设置 安装node软件: 安装淘宝滤镜:npm install -g cnpm --registry = 设置全局的npm从国内下载资源, npmrc添加配置。mac...
标题中的“多语言IM即时通讯源码”指的是一个支持多种语言的即时通讯系统...对于开发者而言,这份源码提供了一个学习和实践即时通讯系统开发的绝佳平台,同时对于企业来说,它可以快速搭建起适应全球化需求的通讯系统。
"mac" 暗示资源可能也涵盖了Mac OS平台的开发环境或工具。"react-native" 是Facebook开发的框架,用于构建原生移动应用,支持iOS和Android,这也是"react-native-android" 和 "react-native-ios" 标签的来源。最后,...
1. **iOS与Mac开发环境**:这部分可能会讲解如何搭建Xcode开发环境,安装必要的SDK和依赖库,以及如何配置iOS模拟器和Mac硬件环境。 2. **Swift编程语言**:作为iOS开发的主要语言,Swift的基础语法、面向对象编程...
WEEX和ReactNative同属流行的跨平台移动开发框架。 WEEX官方资源: WEEX的官方地址是***,在这个网站上可以获取到WEEX的文档、SDK以及其他资源。 快速上手: WEEX最简单的入门方法是使用Playground App和在dotWe...