Mac下搭建react native开发环境

安装必需软件

Homebrew

Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

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

homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

sudo chown -R `whoami` /usr/local

Node

使用Homebrew来安装Node.js.

brew install node

注意有坑:查看安装的node是否最新版本,默认安装的不是最新版本(我以为默认给我了最新(v8.00),其实默认只给我安装了v4.0.0,v4.0.0不支持ES6,当下面用react-native init <Project> 时会报语法错误

解决方法:

1、安装完node后使用命令查看当前版本

node -v

2、然后查看最新版本

npm info node

3、升级node

清除node.js的cache:

sudo npm cache clean -f

安装n工具,n是专门是管理node.js版本的

sudo npm install -g n

安装最新node版本

sudo n stable

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

Android Studio

Ios程序员请绕过

Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。如果版本不合要求,则可以到官网上下载。

具体安装步骤这里就不详细介绍,网上应该有很多教程。

ANDROID_HOME环境变量

环境变量很重要!要不项目跑不起来。

在终端下使用vi ~/.bash_profile命令创建或编辑。如不熟悉vi操作,请点击这里http://www.eepw.com.cn/article/48018.htm

然后使用下列命令使其立即生效(否则重启后才生效):

source ~/.bash_profile

可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

Xcode

Android程序员请绕过

React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode
IDE和Xcode的命令行工具。虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools

Gradle Daemon

开启Gradle Daemon可以极大地提升java代码的增量编译速度。

touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties

测试安装

react-native init AndroidProject
cd AndroidProject
react-native run-android

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

init命令默认会创建最新的版本,而目前最新需要下载boost库编译。此库体积庞大,在国内即便FQ也很难下载成功,导致很多人无法正常运行iOS项目,中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦,又没有对新版本的需求,那么可以暂时创建0.44.3的版本。

react-native init AndroidIos --verison 0.44.3
cd AndroidIos
react-native run-ios/run-android

运行结果如下:

     

推荐安装的工具

Webstorm

WebStormjetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript
IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

WebStorm属于收费开发工具,但是有一个月的试用时间。(webstorm.2017.1.4网上有破解版本,大家可斟酌下载使用)

配置JSX支持

WebStorm->Preferences->Languaes&Frameworks->JacaScript,然后选择ReactJSX,下载安装react,react native

配置Run Configurations

在菜单栏中找到Edit Configurations

最后选择平台运行项目

参考文档:http://reactnative.cn/docs/0.46/getting-started.html#content

原文地址:https://www.cnblogs.com/Free-Thinker/p/8493389.html

时间: 2024-11-05 14:38:38

Mac下搭建react native开发环境的相关文章

在Mac上搭建React Native开发环境

概述 前面我们介绍过在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 i

搭建React Native开发环境遇到的几个问题

根据http://blog.csdn.net/itpinpai/article/details/50809068这篇文章初步搭建React Native 开发环境, 遇到几个问题 首先端口可能被占用了, 访问8081时提示无法访问 解决方法: 在运行react-native start时添加参数--port 8899, 或者在package.json中修改"scripts"中参数, 添加端口号, 或者修改项目下的node_modules\react-native\local-cli\s

React Native开发 - 搭建React Native开发环境

移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的.然而现在有蛮多的公司开发App是基于React Native来开发的,这样可以做到一个App,就是一套代码,一个团队.对于公司来说,无疑节约了成本. <React Native开发>这系列的文章主要是记录本人利用React Native学习开发的笔记,这一篇文章是第一篇<搭建React Na

搭建React Native开发环境

原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/setup-react-native-development-environment/ 安装Xcode 从App Store搜索下载.需要Apple Id账号. 安装Homebrew 打开Terminal,执行以下命令即可安装.详情请参考Homebrew官网(http://brew.sh/). install Homebrew # no need VPN /usr/bin

Golong语言学习--Mac下搭建go语言开发环境(学习摘抄)

Go语言是Google内部主推的语言,它作为一门全新的静态类型开发语言,与当前的开发语言相比具有许多令人兴奋不已的新特性.专门针对多处理器系统的应用程序编程进行了优化,使用go语言完全可以媲美c.c++的速度,而且更加安全.简洁,支持并行进程. 以下是go语言的主要特性: 1.自动垃圾回收 2.更丰富的内置类型 3.函数多反回值 4.错误处理 5.匿名函数和闭包 6.类型和接口 7.并发编程 8.反射 9.语言交互性 Mac开发环境搭建 以上基本都属废话,搭建开发环境尽快开启编程之旅才是王道,笔

Mac下搭建Eclipse Android开发环境

之前一直是用windows搞android开发,但windows这个性能也真是让人醉了,终于一狠心,砸锅卖铁买了Mac.然后就开始在Mac上搭建android开发环境, 其实也不麻烦,关键是找准下载地址就行了,今天特意记录下来搭建过程,以备其他小伙伴参考和自己以后使用. 一.首先,准备好工具,在这里贴一下本人搜到的下载地址: 1.Java SE 6:https://support.apple.com/kb/DL1572?locale=zh_CN 这里需注意:过高版本可能会导致eclipse打不开

Mac下搭建go语言开发环境

一.下载安装go 到墙内下载go的安装包: http://www.golangtc.com/download 点击安装包然后进行安装 二.配置 1.查看环境 go version 2.安装完sdk之后接下来便是配置环境变量了,打开终端输入cd ~ 进入用户主目录,之后输入ls -all命令查看是否存在.bash_profile 文件,存在既使用vim .bash_profile打开并编辑该文件.根据自己实际情况,内容如下: export GOPATH=/Users/apple/Documents

Windows下的 React Native 的环境搭建

感觉react好难QAQ 一.开发环境搭建要求 在Windows操作系统搭建React Native开发环境要求在电脑上安装好JDK,Android SDK,还要求电脑上安装有一套C++编译器,如果没有,推荐安装微软的VIsual Studio Community 2015 二.环境搭建 1.安装JDK(需安装1.8或更高版本) 下载对应你电脑版本的32位或64位JDK,第一次是JDK,第二次是jre,建议安装到同一个文件夹下的不同文件夹中.安装时可以修改安装目录. 2.JDK环境变量配置 (1

手把手教你在Windows下搭建React Native Android开发环境

最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的) react-native的GitHub地址:https://github.com/facebook/react-native react-native的文档地址:http://facebook.github.io/react-native/docs/getting-started.html 1.