搭建开发环境(React Native)
来源:http://reactnative.cn/docs/0.31/getting-started.html
欢迎使用React Native!这篇文档会帮助你搭建基本的React Native开发环境。如果你已经搭好了环境,那么可以尝试一下编写Hello World。
根本你所使用的操作系统、针对的目标平台不同,具体步骤有所不同。如果想同时开发iOS和Android也没问题,你只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同。
译注:如果阅读完本文档
后还碰到很多环境搭建的问题,我们建议你还可以再看看由本站提供的环境搭建视频教程、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的入门文档。
译注:我们更推荐使用WebStorm或Sublime 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)的更多相关文章
- 一、React Native 搭建开发环境(1)(Mac OS - IOS项目)
React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 目的: 由于我想在一台电脑上同时开发IOS和Android两 ...
- 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)
React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个 ...
- React Native从零到一搭建开发环境
React Native从零到一搭建开发环境 ReactNative环境搭建 安装Homebrew 安装rvm 安装nvm 安装node 安装react-native-cli 安装watchman i ...
- Mac中搭建 iOS 的 React Native 环境
手把手教你在Mac中搭建iOS的 React Native环境 http://www.cnblogs.com/damnbird/p/6074607.html 准备工作 1.你需要一台Mac电脑..(这 ...
- React + webpack 快速搭建开发环境
因网上大多React + webpack快速搭建的运行不起来,便自行写了一个.在搭建开发环境的前需安装nodejs,npm. 新建一个工作目录,比如叫reactdome,在reactdome目录中运行 ...
- Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- GJM : Unity3D HIAR -【 快速入门 】 二、搭建开发环境
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- maven实战(01)_搭建开发环境
一 下载maven 在maven官网上可下载maven:http://maven.apache.org/download.cgi 下载好后,解压.我的解压到了:D:\maven\apache-mave ...
- Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境
引言 简单介绍一下Cordova的来历,Cordova的前身叫PhoneGap,自被Adobe收购后交由Apache管理,并将其核心功能开源改名为Cordova.它能让你使用HTML5轻松调用本地AP ...
随机推荐
- Web Services 平台元素SOAP、WSDL 、UDDI
Web Services 拥有三种基本的元素:SOAP.WSDL 以及 UDDI. 什么是 SOAP? SOAP 是一种使应用程序有能力通过 HTTP 交换信息的基于 XML 的简易协议.或者可以更简 ...
- xshell过期了怎么办,是学生就用学生版吧
访问这里:https://www.netsarang.com/download/software.html 点击Free for Home & School 下载家庭版和学生版 来到这个页面了 ...
- 生成对抗网络(Generative Adversarial Network)阅读笔记
笔记持续更新中,请大家耐心等待 首先需要大概了解什么是生成对抗网络,参考维基百科给出的定义(https://zh.wikipedia.org/wiki/生成对抗网络): 生成对抗网络(英语:Gener ...
- VS2010/MFC编程入门之前言
鸡啄米的C++编程入门系列给大家讲了C++的编程入门知识,大家对C++语言在语法和设计思想上应该有了一定的了解了.但是教程中讲的例子只是一个个简单的例程,并没有可视化窗口.鸡啄米在这套VS2010/M ...
- 2016 CCPC 长春 Solution
A - Hanzo vs. Genji 留坑. B - Fraction 水. #include <bits/stdc++.h> using namespace std; inline i ...
- FMS4
先要打开服务器你在本机装的fms,本机就是服务器了!记得现在你的机器既是客户端又是服务端开始===程序===Macromedia===Flash Media Server 2有两个start****, ...
- Centos75 安装 postgresql11
切换到root账户, #安装yum 源 yum install https://download.postgresql.org/pub/repos/yum/11/redhat/rhel-7-x86_6 ...
- 初学libcurl
最近想把某网站上的些数据download下来,在网上找到了cURL,正好来边学边弄一下! 下载libcurl源代码 cURL的官网是http://curl.haxx.se/ ,直接下载源代码包来编译吧 ...
- BootStrap iCheck插件全选与获取value值的解决方法
这篇文章主要介绍了BootStrap iCheck插件全选与获取value值的解决方法,解决方法其实很简单,下面小编给大家分享下这方面的知识 在使用jQuery iCheck 插件的时候遇到了一个问题 ...
- idea tomcat启动乱码问题
配置idea的安装文件的编码: JetBrains\IntelliJ IDEA 2016.3\bin中配置文件idea.exe.vmoptions.idea64.exe.vmoptions 添加 -D ...