因重新升级了系统,一步步搭建react-native环境。

  • 1、安装Homebrew

  打开终端命令->ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  (注:ruby命令苹果系统自带的,如果没有则需安装。)

  等待安装完成,输入 brew -v是否已经安装成功。

  • 2、安装curl

  使用brew来安装curl(也可以使用wget)->brew install curl(或brew install wget)

  • 3、安装nvm并授权

  使用curl安装->curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash 如图:

  提示~/.bash_profile文件不存在,先进入目录->cd ~ 创建文件->touch .bash_profile(如果存在则不用创建),

  然后打开文件->open .bash_profile。

  然后把上面提示export开始到=>中间的的信息内容放到文件内,保存。退出终端重新打开。  

  检测->nvm  --version是否安装成功(出现版本号则表示已经成功。)

  • 4、安装node.js

  使用nvm安装->nvm install node && nvm alias default node 如图:

  nvm 默认是从http://nodejs.org/dist/下载的, 国外服务器, 连不上则会失败,可以多试几次,如果总是失败。

    试试用brew安装->brew install node

    安装成功完后,检测是否成功。
  • 5、安装watchmam和flow
 
    使用brew安装->brew install watchman
    使用brew安装->brew install flow
 
  • 6、更新最新版本。
 
    时时检测以使应用程序保持最新状态-> brew update && brew upgrade
 
  • 7、装react-native
 
    使用npm全局安装->npm install -g react-native-cli(npm命令是在安装node自动安装好的)
    装好后检测下是否成功。->react-native -vision
 
  • 8、创建第一个应用
    装好xcode,进入存放的目录->cd /Users/GloomHu/desktop
    由于网络问题init项目时会失败。把npm切到国内来
       ->npm config set registry https://registry.npm.taobao.org
    ->npm config set disturl https://npm.taobao.org/dist

    使用react native创建第一个应用->react-native init GloomHuProject(GloomHuProject是项目名称)
 
        等待几分钟就完成。如图:
                   
 
    找到项目生成的目录用xcode打开ios/GloomHuProject.xcodeproj,随意修改index.ios.js看看内容,直接run运行。如图:
                    
 

一步步搭建react-native环境(苹果OS X)的更多相关文章

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

  2. 海马玩模拟器——搭建React Native环境

    Visual Studio Emulator for Android 模拟器国内这网络环境不太用,所以使用海马玩模拟器,给大家推荐一下! 下面开始配置环境: 1)下载1.8+JDK,配置JDK环境参考 ...

  3. VSCode 搭建 React Native 环境

    安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行 ...

  4. 1、在MAC上搭建React Native开发环境

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  5. 搭建react native所遇到的坑

    一.所遇问题 在搭建react native环境中,遇到执行react native  run-android命令出现如下问题 Could not resolve all dependencies f ...

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

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

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

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

  8. 搭建React Native开发环境

    搭建React Native开发环境 本文档是Mac下搭建的环境,针对的目标平台不同,以及开发 iOS 和 Android 的不同,环境搭建也有差异. Github地址:https://github. ...

  9. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  10. Mac系统下React Native环境搭建

    这里记录一下在Mac系统下搭建React Native开发环境的过程: 1. 安装HomeBrew: /usr/bin/ruby -e "$(curl -fsSL https://raw.g ...

随机推荐

  1. NAS与SAN

    1. NAS(Network Attached Storage,网络附加存储服务器) 简单地说,NAS就是一台File Server,只要将NAS连接上网络,那么在网络上面的其他主机就能够访问NAS上 ...

  2. js 利用throw 写的一个小程序

    在下边的小程序中比较特殊的是使用isNaN()函数判断一个参数是不是数字, <!DOCTYPE html> <!DOCTYPE html> <html> <h ...

  3. (十七)WebGIS中距离及面积测量的原理和实现以及坐标转换的简单介绍

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在这一章里我们将讨论基础工具栏中另外两个常用工具:距离测量工 ...

  4. 【集合框架】JDK1.8源码分析之ArrayList(六)

    一.前言 分析了Map中主要的类之后,下面我们来分析Collection下面几种常见的类,如ArrayList.LinkedList.HashSet.TreeSet等.下面通过JDK源码来一起分析Ar ...

  5. TCP滑动窗口机制

    我们可以大概看一下上图的模型: 首先是AB之间三次握手建立TCP连接.在报文的交互过程中,A将自己的缓冲区大小(窗口大小)3发送给B,B同理,这样双方就知道了对端的窗口大小. A开始发送数据,A连续发 ...

  6. jQuery-1.9.1源码分析系列(十) 事件系统——事件包装

    首先需要明白,浏览器的原生事件是只读的,限制了jQuery对他的操作.举个简单的例子就能明白为什么jQuery非要构造一个新的事件对象. 在委托处理中,a节点委托b节点在a被click的时候执行fn函 ...

  7. MindMup 是一个开源的、在线的、简单的思维导图工具

    MindMup是一个开源.在线的思维导图工具:它有以下特点: 开源 在线 导图可存放在网站(公有,要是在不同的终端浏览的话需要记住导图的网址)或google driver(私有),无用户名密码 很方便 ...

  8. 【原创】Java编译器对String的优化

    首先看以下的代码: public static void main(String[] arge) { String str1 = new String("1234"); Strin ...

  9. CSS3和jQuery实现的自定义美化Checkbox

    效果图: 是不是比默认的好看多了,个人的审美观应该还是可以的. 当然我们可以在这里查看DEMO演示. 接下来我们一起来看看实现这款美化版Checkbox的源代码.主要思路是利用隐藏原来的checkbo ...

  10. Collection框架

    Collection框架 集合框架(Collection Framework)泛指java.util包的若干个类和接口.如Collection,List,ArrayList,LinkedList,Ve ...