来源:http://reactnative.cn/docs/0.31/getting-started.html

在GitHub上修改这篇文档

欢迎使用React Native!这篇文档会帮助你搭建基本的React Native开发环境。如果你已经搭好了环境,那么可以尝试一下编写Hello World

根本你所使用的操作系统、针对的目标平台不同,具体步骤有所不同。如果想同时开发iOS和Android也没问题,你只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同。

目标平台: iOS Android 开发平台: Mac Linux Windows

译注:如果阅读完本文档后还碰到很多环境搭建的问题,我们建议你还可以再看看由本站提供的环境搭建视频教程windows环境搭建文字教程、以及常见问题

安装

必需的软件

Homebrew

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

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

译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

sudo chown -R `whoami` /usr/local

Node

使用Homebrew来安装Node.js.

React Native需要NodeJS 4.0或更高版本。本文发布时Homebrew默认安装的是6.x版本,完全满足要求。

brew install node

React Native的命令行工具(react-native-cli)

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g react-native-cli

如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权:

sudo chown -R `whoami` /usr/local

Xcode

React Native目前需要Xcode 7.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具,比如git等。

推荐安装的工具

Watchman

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

brew install watchman

Flow

Flow是一个静态的JS类型检查工具。译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。

brew install flow

Nuclide

Nuclide(此链接需要科学上网)是由Facebook提供的基于atom的集成开发环境,可用于编写、运行和 调试React Native应用。

点击这里阅读Nuclide的入门文档

译注:我们更推荐使用WebStormSublime Text来编写React Native应用。

测试安装

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

你也可以在Nuclide中打开AwesomeProject文件夹 然后运行,或是双击ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。

修改项目

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

  • 使用你喜欢的编辑器打开index.ios.js并随便改上几行。
  • 在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改!

完成了!

恭喜!你已经成功运行并修改了你的第一个React Native应用。

搭建开发环境(React Native)的更多相关文章

  1. 一、React Native 搭建开发环境(1)(Mac OS - IOS项目)

    React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 目的: 由于我想在一台电脑上同时开发IOS和Android两 ...

  2. 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)

    React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个 ...

  3. React Native从零到一搭建开发环境

    React Native从零到一搭建开发环境 ReactNative环境搭建 安装Homebrew 安装rvm 安装nvm 安装node 安装react-native-cli 安装watchman i ...

  4. Mac中搭建 iOS 的 React Native 环境

    手把手教你在Mac中搭建iOS的 React Native环境 http://www.cnblogs.com/damnbird/p/6074607.html 准备工作 1.你需要一台Mac电脑..(这 ...

  5. React + webpack 快速搭建开发环境

    因网上大多React + webpack快速搭建的运行不起来,便自行写了一个.在搭建开发环境的前需安装nodejs,npm. 新建一个工作目录,比如叫reactdome,在reactdome目录中运行 ...

  6. Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  7. GJM : Unity3D HIAR -【 快速入门 】 二、搭建开发环境

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  8. maven实战(01)_搭建开发环境

    一 下载maven 在maven官网上可下载maven:http://maven.apache.org/download.cgi 下载好后,解压.我的解压到了:D:\maven\apache-mave ...

  9. Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

    引言 简单介绍一下Cordova的来历,Cordova的前身叫PhoneGap,自被Adobe收购后交由Apache管理,并将其核心功能开源改名为Cordova.它能让你使用HTML5轻松调用本地AP ...

随机推荐

  1. java基础知识面试题(41-95)

    41.日期和时间:- 如何取得年月日.小时分钟秒?- 如何取得从1970年1月1日0时0分0秒到现在的毫秒数?- 如何取得某月的最后一天?- 如何格式化日期?答:问题1:创建java.util.Cal ...

  2. Ubuntu下navicat过期解决办法

    Ubuntu下使用navicat过期.试用期是15天. 可以删除.navicat64/解决.不好的一点就是.需要重新连接数据库,以前的连接记录会被删除 rm -rf ~/.navicat64/

  3. mysql锁机制之综述(一)

    https://zhuanlan.zhihu.com/p/29150809 一.数据库有锁机制的原因. 数据库锁定机制简单来说,就是数据库为了保证数据的一致性和有效性,而使各种共享资源在被并发访问变得 ...

  4. c++第二十九天

    p143~p151:其他隐式类型转换1.数组转换成指针,大多数表达式自动转换成指向数组首元素的指针. 2.指针的转换. 3.转换成布尔类型,例如在if (condition) 中. 4.转换成常量. ...

  5. FastDFS+Nginx分布式文件系统部署安装

    安装: ##安装tracker.storage参考:http://www.cnblogs.com/zclzhao/p/5025229.html nginx代理设置参考:http://www.cnblo ...

  6. 20145104张家明 《Java程序设计》第2周学习总结

    20145104张家明 <Java程序设计>第2周学习总结 教材学习内容总结 本周学习了第三章的内容,看过之后呢,学的和c语言是相通的,看起来就是非常的顺畅,自我感觉良好,第三章主要讲了一 ...

  7. 20145319 return-to-libc攻击实验

    20145319 Return-to-libc攻击实验 一 实验内容 return-to-libc实验是一个基于缓冲区溢出攻击实验的基础上的一种攻击实验 缓冲区溢出攻击相关知识: 原理:通过一段包含s ...

  8. 20162314 《Program Design & Data Structures》Learning Summary Of The Eleventh Week

    20162314 2017-2018-1 <Program Design & Data Structures>Learning Summary Of The Eleventh We ...

  9. Ubuntu 安装zookeeper

    下载zookeeper   Zookeeper下载 下载以后将文件迁移到/home/Hadoop/文件夹下面 hongdada@ubuntu:~/Downloads$ sudo mv zookeepe ...

  10. reason: image not found的解决方案

    在制作framework时遇到真机运行时导致的reason: image not found允许崩溃的问题,下面是我的解决方案: 首先我们分析一下出现这种情况的原因,原因就是framework找不到镜 ...