手把手教你在Mac中搭建iOS的 React Native环境

准备工作

1.你需要一台Mac电脑。。(这不是废话?我所用的是Air~~穷。。)

2.我所操作的电脑系统环境是

3.xcode版本:8.0正式版

必需的软件

1.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

安装完成后:进过一系列等待后, (其中安装需要输入电脑密码)

2.Node

使用刚刚安装的Homebrew来安装Node.js

brew install node

安装完成后

3.安装完node后建议设置npm镜像以加速后面的过程,否则后面插件安装巨慢

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

4.安装Yarn

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

安装完成后

5.Watchman

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

brew install watchman

6.Flow

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

brew install flow

以上操作完成后,环境基本打好,缺的是一个IDE,既然React Native是Facebook的玩意,那就用Facebook推荐的方案吧,这里采用Atom+Nuclide插件

1.安装Atom

下载地址   (这蛋疼的下载地址,每秒只有几KB,建议翻x下载)

下载完成后解压,打开

打开正常后,我们安装Nuclid,有两种方式,图形化下载安装和命令行,两种都说一下

1.图形化安装:

点击菜单栏:Atom->Preferences,或者可以”Command+,”快捷打开

然后,在Install Packets的输入框中,输入nuclide,出现的第一个就是我们想要安装的,点击install

安装完成后就会有上图红色圈中的菜单栏

2.命令行安装:

apm install nuclide

命令行安装完成后,打开Atom,选择Packages->Settings View->Manage Packets

然后选择Packages,Nuclide中点击Settings

然后往下滚动找到如图选项打钩

然后重启Atom,就会执行相关安装,到这里,所有安装完毕!。

最后,我们创建一个工程试验一下。。

用命令行cd到桌面,然后

react-native init 项目名称

项目创建完毕后的文件夹内容如图。。。。

如果你直接用xcode打开.xcodeproj运行,结果将会是:

这是没写过一行代码的项目,如果你要修改一下,可以打开Atom,点击Add project folder ,找到你刚才创建的工程打开,

打开后文件目录:

可以发现我这里打开的是ios.js,如果是安卓的伙伴当然是打开android.js

然后,你就可以随意开发了。。。。

时间: 2024-11-26 11:53:04

手把手教你在Mac中搭建iOS的 React Native环境的相关文章

Mac中搭建 iOS 的 React Native 环境

手把手教你在Mac中搭建iOS的 React Native环境 http://www.cnblogs.com/damnbird/p/6074607.html 准备工作 1.你需要一台Mac电脑..(这不是废话?我所用的是Air~~穷..) 2.我所操作的电脑系统环境是 3.xcode版本:8.0正式版 必需的软件 1.Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件. 打开终端,执行 /usr/bin/ruby -e "$(curl -fs

iOS版 React Native 环境搭建

今天没事,搞了搞React Native,也都是才开始弄,并没有感受过它的强大,嘿嘿.今天算是demo可以跑了吧.特此记录一下搭建过程,留着日后使用. 特此声明,才过程,不保证百分百成功,因为本人在搭建的时候参考了好多东西相关文章,还请各位看官自请斟酌,啦啦啦啦我都是这么"负责任". 极客学院的官方文档中文版 -- 特此奉上-- 传送门  主要的学习参考对象, 此内容中可以看到英文文档 此外,安装步骤参考的是,这篇文章,这里记录是为了自己观看方便,和参考文章有点出入 搭建步骤如下: H

手把手教你写Sublime中的Snippet

手把手教你写Sublime中的Snippet Sublime Text号称最性感的编辑器, 并且越来越多人使用, 美观, 高效 关于如何使用Sublime text可以参考我的另一篇文章, 相信你会喜欢上的..Sublime Text 2使用心得 现在介绍一下Snippet, Snippets are smart templates that will insert text for you and adapt it to their context. Snippet 是插入到文本中的智能模板并

在Eclipse中搭建cocos2d-x的Android开发环境(免cygwin)

在突击几天学习Android开发之后,我开始转向cocos2d-x的Android开发了.由于自己以前有了解过cocos2d-x的开发,当时自己也学过不少游戏引擎,觉得cocos2d-x作为一个游戏引擎实在是比较简陋,没想到cocos2d-x现在红得发紫,这是我远远没有想到的.于是也赶赶潮流的末班车,查资料顺利地在Eclipse上搭建cocos2d-x的Androd开发环境. 原创文章,反对未声明的引用.原博客地址:http://blog.csdn.net/gamesdev/article/de

在Eclipse中搭建Dagger和Dagger2使用环境

眼下Dagger有两个版本号,一个是square的Dagger1.x,另外一个是由google主导与squre联合开发的Dagger2. 本文介绍一下在Eclipse中搭建Dagger和Dagger2使用环境.样例採用的均为Dagger和Dagger2官方提供的 "咖啡"案例(Dagger1.x的案例位置在example/simple目录下.Dagger2的案例位置在example/simple目录下). Dagger1.X: 1. 首先下载Dagger1.x的相关内容. jar文件能

史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views 编辑推荐:稀土掘金 是一个高质量的技术社区,从 React Native 到 RxJava,性能优化到优秀开源库,让你不错过移动开发的每一个技术干货.各大应用市场搜索「掘金」,技术干货尽在掌握中. 说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X

搭建 webpack、react 开发环境(一)

基本介绍 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.less 等转换成一个静态文件,减少了页面的请求. React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,它是一个用于构建用户界面的 JAVASCRIPT 库,主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图).由于拥有较高的性能,代码逻辑非常简单,所以

谈谈React Native环境安装中我遇到的坑

谈谈React Native环境安装 这个坑把我困了好久,真的是接近崩溃的边缘...整理出来分享给大家,希望遇到跟我一样问题的小伙伴能尽快找到答案. 首先,这是在初始化App之后,react-native run-android指令  报错如下: 这个问题困扰了好久,查阅了很多资料,使用各种解决办法,有的资料解决办法如下: 跟随着改变之后,再react-nativerun-android,运行结果如下: 以上的方法依然未能解决,反而报了其他的错误,然后我把文件中更改的地方复原. 下面是第二种方法

初学 React native | 环境搭建(在模拟器上运行)

我的电脑是windows 所以就以 windows上+Android 配置React native 环境 网上的安装教程非常多,我总结了一下,出错原因主要是node java python c++  sdk 环境有问题,或者就是自己没有科学上网(你懂),网络有问题,导致了安装失败 至于如何安node java python c++ react-native-cli Android  sdk 我就不那么详细的说了,我主要说下我碰见的问题,想了解具体如何解决,点击这,还有这 node node wi