因重新升级了系统,一步步搭建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. 将 instance 连接到 first_local_net - 每天5分钟玩转 OpenStack(82)

    上一节 first_local_net 已经就绪,下面创建 instance 并将其连接到该网络. 将 instance 连接到 first_local_net launch 一个 instance, ...

  2. 用脚本如何实现将Linux下的txt文件批量转化为Windows下的txt文件?

    众所周知,Windows和Linux的文件换行回车格式不同,Windows下换行格式是\r\n(回车+换行),Linux下换行格式为\n(只是换行),因此,其中一个操作系统的文本文件若需要在另外一个中 ...

  3. jQuery的extend方法

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩 ...

  4. 汽车之家一道SQL 面试题,大家闲来无事都来敲一敲

    写在前面 上周去汽车之家面试,拿到这个SQL笔试题顿时感觉到有些陌生,因为好长时间不写SQL语句了,当时只写了表设计,示例数据和SQL语句都没写出来. 汽车之家应该用的SQL Server, 编程题一 ...

  5. mybatis入门基础(七)----延迟加载

    一.什么是延迟加载 resultMap可以实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 需求: ...

  6. 【Python实战】Scrapy豌豆荚应用市场爬虫

    对于给定的大量APP,如何爬取与之对应的(应用市场)分类.描述的信息?且看下面分解. 1. 页面分析 当我们在豌豆荚首页搜索框输入微信后,会跳转到搜索结果的页面,其url为http://www.wan ...

  7. css3+visbibilty解决淡入淡出问题

    .fade{ visibility: hidden; opacity: ; transition: all .5s; } .fade.on { visibility: visible; opacity ...

  8. 单片机DA转换实现正弦波

    使用的是查表法: 1.c文件: #include "reg52.h" #include <intrins.h> #include <i2c.h> #defi ...

  9. Xamarin.Android之Splash的几种简单实现

    对现在的APP软件来说,基本上都会有一个Splash页面,类似大家常说的欢迎页面.启动界面之类的. 正常来说这个页面都会有一些相关的信息,比如一些理念,Logo,版本信息等 下面就来看看在Xamari ...

  10. asp.net WebService+Ajax调用

    default.aspx 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&qu ...