react native 环境配置
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/
在git上下载,或者直接clone项目 React native
npm install -g react-native-cli 安装命令行界面工具。
在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! 回车
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/
这样子我们就换成了淘宝的源了
)
1)
npm install -g react-native-cli --verbose
2)在你自己创建的文件目录里快速生成一个RN项目
react-native init 项目名称 --verbose
注:
执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复)。
打开项目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 环境配置的更多相关文章
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用
史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 | React Native技术文章 | Sky丶清| 95条评论 | 33530 views ...
- React Native环境配置
React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...
- React Native环境配置之Windows版本搭建
接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...
- react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置
参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...
- windows 7下React Native环境配置
React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...
- React Native环境配置和简单使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- 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% ...
- Windows版本搭建安装React Native环境配置
1 安装Chocolatey 打开cmd黑窗口 @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-obje ...
随机推荐
- 记处理线上记录垃圾日志 The view 'Error' or its master was not found
最近监控线上日志,网站是ASP.NET MVC 开发的,发现不少错误日志都记录同样的内容: The view 'Error' or its master was not found or no vie ...
- Android Weekly Notes Issue #228
Android Weekly Issue #228 October 23rd, 2016 Android Weekly Issue #228 本期内容包括: Android 7.1的App Short ...
- IOS 网络-深入浅出(一 )-> 三方SDWebImage
首要我们以最为常用的UIImageView为例介绍实现原理: 1)UIImageView+WebCache: setImageWithURL:placeholderImage:options: 先显 ...
- 获取iPhone手机的UDID和设备名称.
关于设备名称: iPhone的设备名称也可以在手机上面查看到:设置-通用-关于本机-名称(设备名称是可以自己改的) 关于UUID: 什么?用了iPhone这么久你不知道什么叫UDID! UDID 是由 ...
- 一个基于Microsoft Azure、ASP.NET Core和Docker的博客系统
2008年11月,我在博客园开通了个人帐号,并在博客园发表了自己的第一篇博客.当然,我写博客也不是从2008年才开始的,在更早时候,也在CSDN和系统分析员协会(之后名为“希赛网”)个人空间发布过一些 ...
- 使用 Json.Net 对Json文本进行 增删改查
JSON 已经成为当前主流交互格式, 如何在C#中使用 Json.Net 对Json文本进行 增删改查呢?见如下代码 #region Create (从零创建) public static strin ...
- ArrayList<E>源码分析
ArrayList是按照线性表结构实现的 ArrayList的主要继承结构 public class ArrayList<E> extends AbstractList<E> ...
- AC日记——楼房 codevs 2995
2995 楼房 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 地平线(x轴)上有n个矩(lou ...
- GO语言总结(3)——数组和切片
上篇博文简单介绍了一下Go语言的基本类型——GO语言总结(2)——基本类型,本篇博文开始介绍Go语言的数组和切片. 一.数组 与其他大多数语言类似,Go语言的数组也是一个元素类型相同的定长的序列. ( ...
- [LeetCode] Count of Smaller Numbers After Self 计算后面较小数字的个数
You are given an integer array nums and you have to return a new counts array. The counts array has ...