文档章节

React-Native入门指南(一)——环境配置 & Hello World

vczero
 vczero
发布于 2015/06/29 13:09
字数 794
阅读 4145
收藏 190

React-Native入门指南

github:https://github.com/vczero/react-native-lession

React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率。

最近一个星期写的文章如下,链接是github page的,其实也可以在系列博客找到相应文章:

还有几篇会时刻更新:

第一篇环境配置 & Hello World

一、前言

最近手头的工作繁多,有研究性的项目和系统研发,正好遇到同事离职,接手了框架的UI组件,不仅需要维护和填坑,还需要开发新的功能组件。因为身在H5-Hybird的框架部门,最近团队开始尝试使用React-Native来做些东西。之前也有过开发iOS App的冲动,学了点Object-c,这次正好借此机会进入App开发,以弥补自己在Native-App上的经验不足。

二、环境配置

(1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦。
(2)在Mac上安装Xcode,建议Xcode 6.3以上版本
(3)安装node.js:https://nodejs.org/download/
(4)建议安装watchman,终端命令:brew install watchman
(5)安装flow:brew install flow
ok,按照以上步骤,你应该已经配置好了环境。

三、Hello, React-Native

现在我们需要创建一个React-Native的项目,因此可以按照下面的步骤:
打开终端,开始React-Native开发的旅程吧。
(1)安装命令行工具:sudo npm install -g react-native-cli
(2)创建一个空项目:react-native init HelloWorld
(3)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。
(4)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。
启动完成后,你会看到React-Packger和iOS模拟器,具体的效果如下,说明你创建项目成功了。

Hello World

四、改改HelloWorld

Xcode里面的代码目录结构暂时不用管了,打开HelloWorld项目文件夹,找到index.ios.js文件。
index.ios.js文件就是React-Native JS 开发之旅的入口文件了。 先来个感性的认识,修改一
些文本,下一篇会解读里面的代码。用文本编辑器打开index.ios.js文件。
(1)找到代码<Text></Text>部分:
<Text style={styles.welcome}>
      Welcome to React Native!
</Text>
修改成如下:
<Text style={styles.welcome}>
      React-Native入门学习
</Text>
(2)找到代码
welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
},
修改成如下:
welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'red',
},
(3)有web开发经验的你,上面的修改你一定会体会到些什么。点击模拟器,cmd + R,刷新视图,会看到如下截图:

Hello World Red Text

四、恭喜你,万里长征已经走了1000步

如果有过web开发经验的你,一定觉得很容易理解和学习React-Native,所以这一小步也是一大步
(1000步)。千里之行,始于此步。

笔者https://github.com/vczero/react-native-lession

© 著作权归作者所有

vczero

vczero

粉丝 133
博文 10
码字总数 13855
作品 3
杨浦
个人站长
私信 提问
加载中

评论(32)

时光青年依旧蓝-
时光青年依旧蓝-
成功在win7上入门。
求是科技
求是科技
不错 学习了
心有灵犀
心有灵犀
怒赞797979
vczero
vczero 博主

引用来自“程序师”的评论

windows和安卓可以吗3
目前还不可以,facebook预计10月份出android
程序师
程序师
windows和安卓可以吗3
独树一枝
很好的教程,操作了一遍。
永和
永和

引用来自“永和”的评论

执行:react-native init HelloWorld 命令后,出现一下错误,请大侠帮忙看看,谢谢。

npm WARN locking Error: EACCES, open '/Users/wingwang/.npm/_locks/react-native-1575aaa13fbad60f.lock'
npm WARN locking at Error (native)
npm WARN locking /Users/wingwang/.npm/_locks/react-native-1575aaa13fbad60f.lock failed { [Error: EACCES, open '/Users/wingwang/.npm/_locks/react-native-1575aaa13fbad60f.lock']
npm WARN locking errno: -13,
npm WARN locking code: 'EACCES',
npm WARN locking path: '/Users/wingwang/.npm/_locks/react-native-1575aaa13fbad60f.lock' }
npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "--save" "react-native"
npm ERR! node v0.12.6
npm ERR! npm v2.11.2

引用来自“vczero”的评论

@永和 v587 (1)看到你的node是12.6,node 切换到v0.10.0。因为创建项目的时候还是需要node 0.10.0的, 提给你一个node版本管理工具: https://github.com/creationix/nvm https://cnodejs.org/topic/5338c5db7cbade005b023c98 如果后续需要高版本库,可以使用nvm切换。nvm挺好用的。 (2)还有权限问题—— EACCES。看看是否需要sudo
非常感谢!
vczero
vczero 博主

引用来自“李惟”的评论

npm WARN engine stacktrace-parser@0.1.1: wanted: {"node":"~0.10"} (current: {"node":"0.12.6","npm":"2.12.1"})
npm ERR! fetch failed http://registry.cnpmjs.org/esprima-fb/download/esprima-fb-3001.1.0-dev-harmony-fb.tgz
npm WARN retry will retry, error on last attempt: Error: fetch failed with status code 404

> ws@0.4.31 install /Library/WebServer/app/react/node_modules/react-native/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

npm ERR! fetch failed http://registry.cnpmjs.org/esprima-fb/download/esprima-fb-3001.1.0-dev-harmony-fb.tgz
npm WARN retry will retry, error on last attempt: Error: fetch failed with status code 404
npm ERR! fetch failed http://registry.cnpmjs.org/esprima-fb/download/esprima-fb-3001.1.0-dev-harmony-fb.tgz

> fsevents@0.3.6 install /Library/WebServer/app/react/node_modules/react-native/node_modules/babel/node_modules/chokidar/node_modules/fsevents
> node-gyp rebuild

这段的意思好像是下载不了所需的包,我安装了CNPM,请问怎么办

引用来自“vczero”的评论

刚才复现了下,node 切换到v0.10.0即可。因为创建项目的时候还是需要node 0.10.0的,后续有些库需要高版本,可以再切回。提给你一个node版本管理工具: https://github.com/creationix/nvm https://cnodejs.org/topic/5338c5db7cbade005b023c98 如果后续需要高版本库,可以使用nvm切换。nvm挺好用的。

引用来自“李惟”的评论

我将cnpm换回来,就OK了。3Q
嗯嗯,对的,cnpm貌似不能创建项目的。
李惟
李惟

引用来自“李惟”的评论

npm WARN engine stacktrace-parser@0.1.1: wanted: {"node":"~0.10"} (current: {"node":"0.12.6","npm":"2.12.1"})
npm ERR! fetch failed http://registry.cnpmjs.org/esprima-fb/download/esprima-fb-3001.1.0-dev-harmony-fb.tgz
npm WARN retry will retry, error on last attempt: Error: fetch failed with status code 404

> ws@0.4.31 install /Library/WebServer/app/react/node_modules/react-native/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

npm ERR! fetch failed http://registry.cnpmjs.org/esprima-fb/download/esprima-fb-3001.1.0-dev-harmony-fb.tgz
npm WARN retry will retry, error on last attempt: Error: fetch failed with status code 404
npm ERR! fetch failed http://registry.cnpmjs.org/esprima-fb/download/esprima-fb-3001.1.0-dev-harmony-fb.tgz

> fsevents@0.3.6 install /Library/WebServer/app/react/node_modules/react-native/node_modules/babel/node_modules/chokidar/node_modules/fsevents
> node-gyp rebuild

这段的意思好像是下载不了所需的包,我安装了CNPM,请问怎么办

引用来自“vczero”的评论

刚才复现了下,node 切换到v0.10.0即可。因为创建项目的时候还是需要node 0.10.0的,后续有些库需要高版本,可以再切回。提给你一个node版本管理工具: https://github.com/creationix/nvm https://cnodejs.org/topic/5338c5db7cbade005b023c98 如果后续需要高版本库,可以使用nvm切换。nvm挺好用的。
我将cnpm换回来,就OK了。3Q
vczero
vczero 博主

引用来自“永和”的评论

执行:react-native init HelloWorld 命令后,出现一下错误,请大侠帮忙看看,谢谢。

npm WARN locking Error: EACCES, open '/Users/wingwang/.npm/_locks/react-native-1575aaa13fbad60f.lock'
npm WARN locking at Error (native)
npm WARN locking /Users/wingwang/.npm/_locks/react-native-1575aaa13fbad60f.lock failed { [Error: EACCES, open '/Users/wingwang/.npm/_locks/react-native-1575aaa13fbad60f.lock']
npm WARN locking errno: -13,
npm WARN locking code: 'EACCES',
npm WARN locking path: '/Users/wingwang/.npm/_locks/react-native-1575aaa13fbad60f.lock' }
npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "--save" "react-native"
npm ERR! node v0.12.6
npm ERR! npm v2.11.2

@永和 v587 (1)看到你的node是12.6,node 切换到v0.10.0。因为创建项目的时候还是需要node 0.10.0的, 提给你一个node版本管理工具: https://github.com/creationix/nvm https://cnodejs.org/topic/5338c5db7cbade005b023c98 如果后续需要高版本库,可以使用nvm切换。nvm挺好用的。 (2)还有权限问题—— EACCES。看看是否需要sudo
React-Native学习资料

我(web+android开发经验)学习React Native过程中接触的知识点和学习的线路图。 React Native第1天——环境配置及知识体系(http://my.oschina.net/addcn/blog/647290) 掌握环境配置及运行h...

addcn
2016/04/06
256
0
React Native第2天——底层原理了解

我(web+android开发经验)学习React Native过程中接触的知识点和学习的线路图。 React Native第1天——环境配置及知识体系(http://my.oschina.net/addcn/blog/647290) 掌握环境配置及运行h...

addcn
2016/03/28
2.3K
0
React-Native入门指南(三) ——CSS和UI布局

React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率。 最近一个星期写的文...

vczero
2015/06/29
260
0
React-Native入门指南(六)——JSX在React-Native中的应用

React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率。 最近一个星期写的文...

vczero
2015/06/29
218
0
React-Native入门指南(二)——代码结构

React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率。 最近一个星期写的文...

vczero
2015/06/29
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
36分钟前
39
0
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
9
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部