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

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

http://blog.csdn.net/totogo2010/article/details/51567863

http://www.jianshu.com/p/a85cba2efb7a

http://blog.csdn.net/huxiaoqiao163/article/details/51423903

时间: 2024-10-13 08:01:50

Mac中搭建 iOS 的 React Native 环境的相关文章

手把手教你在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)" 如果在

iOS版 React Native 环境搭建

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

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

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

谈谈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

React Native环境搭建

React Native环境搭建 by 伍雪颖 1.安装 node,watchman,flow brew install node brew install --HEAD watchman brew install flow 2.安装react-native npm install -g react-native-cli 3.初始化工程 react-native init Helloworld 4.用xcode打开Helloworld.xcodeproj,运行 大功告成!

windows环境下搭建react native环境

一.基础软件1.安装jdk-1.8.0_922.安装android studio-2.1.2(文件大小为1.2G的那个)3.安装node.js(目前最新是6.3.0)4.安装git-2.9.05.安装genymotion-2.7.2(进入setting配置sdk为android studio的sdk)注意1:genymotion模拟器开启后要打开wifi,react native需要注意2:设置环境变量ANDROID_HOME值:C:\Users\clock\AppData\Local\Andr

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

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

在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