1. 安装Homebrew 
Homebrew主要用于安装后面需要安装的watchman、flow 
打开MAC的终端,输入如下命令:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

经过漫长的等待后,安装完成。

执行 brew doctor 命令。

按enter键 ,继续配置 。当你看到   ==>Installation successful!  那么就安装成功了

2.安装nvm和nodejs 
nvm是用于nodejs版本管理的工具,用于安装nodejs。 
对于nvm应该可以使用brew直接安装,但是我没有用这个安装,读者可以自己使用如下命令试试:

brew install nvm

我使用的另一种方式,在终端中输入如下的命令:

brew install node . 该命令执行后,自动装好node和npm

这个用于安装nodejs和npm。npm用于nodejs包依赖管理的工具。

3. 安装watchman 
watchman是用于监听文件变化的工具,应该是用于监听文件变化,然后界面做出响应。执行如下命令:

brew install watchman

4. 安装flow 
flow我个人理解的是用于静态分析js语法错误的工具,能够更早的js的语法错误。执行如下的命令:

brew install flow

到这里基本的环境就配置好了,下面创建一个iOS的例子,在终端中将目录切换到你保存工程的目录,然后执行如下的命令:

$ npm install -g react-native-cli  
 $ react-native init AwesomeProject     
$ cd AwesomeProject/
    1. 在git上下载,或者直接clone项目 React native

    2. npm install -g react-native-cli 安装命令行界面工具。

    3. 在react-native的项目目录下使用react-native命令行命令init初始化一个demo项目。react-native init DemoProject 
      初始化完成后,在DemoProject目录下会看到DemoProject.xcodeproj文件,其中的index.ios.js就是控制项目的js文件,简单的demo,主要界面和逻辑都是在这个js文件里。

(  注意:安装nvm

1)我们使用Git把nvm给git下来

打开终端,复制黏贴

git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

2)输入 . ~/.nvm/nvm.sh 或者 soure ~/.nvm/nvm.sh  启动nvm管理器

3)配置下nvm管理器,使我们打开终端的时候自动启动nvm

(1)、在终端输入:

vi ~/.bashrc

(2)复制黏贴

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

然后  esc退出编辑 ,shit +:  输入   :wq!     回车

vi ~/.bashrc

3)vi ~/.profile (重复上一步操作)

4)nvm install node && nvm alias default node

等待安装完成,安装完成之后我们就可以通过npm来管理node了!

5)国内的网络npm自带的源真的卡出了翔,所以我们要换成淘宝的源

npm install -g nrm

nrm use taobao

Registry has beensetto: http://registry.npm.taobao.org/

这样子我们就换成了淘宝的源了

3.创建项目

1)

npm install -g react-native-cli --verbose

2)在你自己创建的文件目录里快速生成一个RN项目

在桌面创建一个新的文件

react-native init 项目名称 --verbose

注:

执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复)。

3)

打开项目Project -> ios->项目Project.xcodeproj

com+R  启动项目

注:可能nvm配置路径问题,项目运行的时候可能会出现错误

解决方法:

在项目启动中,cd 到AwesomeProject目录下,执行

react-native start

(之前的版本是npm start 新的版本已经改成了react-native start)

// --------------

1.初始化node

在终端中,定位到iOS项目的根目录,运行
        npm init     然后一路回车即可

注意:node项目的命名不能使用大写字母,所以指定name时输入simple-native 后回车

执行完毕之后,在项目根目录下生成了一个package.json文件,类似于CocoaPods的Podfile文件,用来管理项目依赖

2.安装React Native

再项目根目录下运行
npm install --save react-native

由于国内的网络问题,npm安装比较缓慢,可以使用淘宝npm镜像替代

安装完毕之后,根目录下会生成node_modules文件夹,里面保存了react和react-native的依赖--save参数会在package.json文件中保存react和react-native的依赖声明

3.cocoapods

在项目根目录下,运行
pod init

在项目根目录下生成了Podfile,用任何编辑器打开,编写React Native的依赖

(参考链接react native网:http://reactnative.cn/docs/0.35/getting-started.html#content    。        欢迎大家来提意见!!!)

react native 环境配置的更多相关文章

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

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

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

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

  3. React Native环境配置

    React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...

  4. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  5. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  6. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

  7. React Native环境配置和简单使用

    # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...

  8. Windows版本搭建安装React Native环境配置及相关问题

    此文档整理参考地址: http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C% ...

  9. Windows版本搭建安装React Native环境配置

    1 安装Chocolatey 打开cmd黑窗口 @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-obje ...

随机推荐

  1. 从 HTTP 到 HTTPS - 什么是 HTTPS

    这篇文章首发于我的个人网站:听说 - https://tasaid.com/,建议在我的个人网站阅读,拥有更好的阅读体验. 这篇文章与 博客园 和 Segmentfault 共享. 前端开发QQ群:3 ...

  2. 在View and Data API中更改指定元素的颜色

    大家在使用View and Data API开发过程中,经常会用到的就是改变某些元素的颜色已区别显示.比如根据某些属性做不同颜色的专题显示,或者用不同颜色表示施工进度,或者只是简单的以颜色变化来提醒用 ...

  3. 用Kotlin语言重新编写Plaid APP:经验教训(II)

    原文标题:Converting Plaid to Kotlin: Lessons learned (Part 2) 原文链接:http://antonioleiva.com/plaid-kotlin- ...

  4. node.js+socket.io配置详解

    由于我是在win7的环境下,在这里就以win7系统为例进行讲解了. 首先需要在nodejs官网下载最新版的node.js,下载完毕直接安装即可,安装成功后在cmd命令行中执行node指令,如下结果就说 ...

  5. iOS开发常用快捷键

    二. Xcode基本快捷键 新建项目 Shift + CMD + N 项目中新建文件 CMD + N 运行 CMD + R 编译 CMD + B 停止运行 CMD + . 清除缓存 Shift + C ...

  6. ASP.NET MVC 3 网站优化总结(六)压缩 HTML

    压缩 html 可以去除代码中无用的空格等,这样可提高网站的加载速度并节省带宽.今天就让我们看看在 ASP.NET MVC 3 怎么实现 html 压缩,我们可通过实现 ActionFilter 来完 ...

  7. WebServices:WSDL的结构分析

    WSDL(Web Services Description Language,Web服务描述语言)是为描述Web Services发布的XML格式.W3C组织没有批准1.1版的WSDL,但是2.0版本 ...

  8. 使用Nexus搭建Maven本地仓库

    阅读目录 序 Nexus 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 在工作中可能存在有 ...

  9. 总结Cnblogs支持的常用Markdown语法

    一.什么是Markdown Markdown是一种可以使用普通文本编辑器编写的标记语言, Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人用它写博客.世界上最流行的博客平台 ...

  10. Markdown 新手指南

    Markdown 新手指南   「简书」作为一款「写作软件」在诞生之初就支持了 Markdown,Markdown 是一种「电子邮件」风格的「标记语言」,我们强烈推荐所有写作者学习和掌握该语言.为什么 ...