注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

罔少年

QQ 332256483

 
 
 

日志

 
 

react native(二) 环境配置  

2016-05-30 15:16:55|  分类: swift |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
OS X系统下
1、安装HomeBrew       (OS X下面的一个包管理应用)  
2、安装Node       (Javascript运行环境)
3、安装Watchman       (检测文件变化的一个工具)
4、安装Flow        (检查jsx语法的工具)
5、安装react native 命令行工具
以上5个命令行代码如下

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

brew install node
brew install watchman
brew install flow
npm install -g react-native-cli

开始创建项目
6、用react native创建HelloWorld

react-native init HelloWorld


创建完以后用下面命令,看到如下表示成功
react native 环境配置 - 我是小黄人 - lanaiver6291的博客
7、在helloworld目录下用cnpm install加载模块

npm install


react native 环境配置 - 我是小黄人 - lanaiver6291的博客
 
如果npm失败,那就是天朝网络限制,用淘宝的cnpm
alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

然后再次加载模块

cnpm install


8、打开helloworld项目
 定位到HelloWorld.xcodeproj目录
react native 环境配置 - 我是小黄人 - lanaiver6291的博客

9、运行HelloWorld项目,如果看到模拟器出现这个界面,表示成功了
react native 环境配置 - 我是小黄人 - lanaiver6291的博客
 
10、修改index.ios.js 文件,把HelloWorld -->Welcome React Native!
上面模拟器看到的界面,其实就是index.ios.js 文件
react native 环境配置 - 我是小黄人 - lanaiver6291的博客

vim打开index.ios.js 文件,下面就是这个界面的代码,但无法修改
react native 环境配置 - 我是小黄人 - lanaiver6291的博客
 
 11、vim修改保存

按下a进入修改模式
react native 环境配置 - 我是小黄人 - lanaiver6291的博客
修改完以后,按esc,然后按:wq或者:qw(尼玛网上说:qw,自己试验是:wq)
 react native 环境配置 - 我是小黄人 - lanaiver6291的博客

修改后,在模拟机下,按command+R。可以看到变成“WelCome to React Native”
 react native 环境配置 - 我是小黄人 - lanaiver6291的博客
 

总结:1-5属于环境配置,别问为什么,就是这么做
    7我是没遇到,所以不需要配置cnpm
    遇到的坑在8-11这块。项目创建的时候,可能会多层目录/helloworld/helloworld/...找不到对应的文件
    vim修改保存,网上找了半天才找到

react native(三) 开发工具 Nuclide 安装配置

  评论这张
 
阅读(49)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017