2018 React-Native(入门指南)学习笔记(一)

第一篇环境配置 & Hello World

一、前言

最近手头的工作繁多,有研究性的项目和系统研发,作为一名iOS原生开发的小学生, 对于突如其来的React-Native / week 等跨平台框架, 说实话我是持拒绝的态度的, 因为我始终相信任何跨屏他开发的框架在性能上与原生的是无法比较的, 仅针对iOS平台来说, 哪怕只是一个很简单的页面, 我也是想坚持用原生写, 当然这属于我个人想法, 我是一个原生论者. 但无论怎样我们都不能否认这些跨平台框架为我们带来的便捷性(当然是对于领导来说), 因为跨平台, 开发一次, 安卓iOS都可以用, 线上更改数据样式比较方便等等''数不胜数''的好处... 扯远了...扯远了...
今天我们主要来学习下React-Native在mac下的环境搭建, 安装, 以及建立第一个React-Native项目.

各位朋友, 各位老司机们, React-Native 24小时恐怖之旅即将启程, 请做好"删库跑路"的准备.

二、环境配置

(1) 需要一台Mac(OSX),这个是前提,建议还是入手一本啦。
(2) 在Mac上安装Xcode,建议Xcode 6.3以上版本
(3) 安装node.js->点击查看(重要)
(4) 建议安装watchman,终端命令:brew install watchman
(5) 安装flow:brew install flow

OK,按照以上步骤,你应该已经配置好了环境。

三、第一个React-Native项目 "Hello World!!!"

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

启动完成后,你会看到React-PackgeriOS模拟器,具体的效果如下,说明你创建项目成功了。

install_successful.png
project_icon.png
myFirtsReactNative.png

四、我们来修改下 HelloWorld

Xcode里面的代码目录结构暂时不用管了,打开HelloWorld项目文件夹,找到app.js文件。
app.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,刷新视图,会看到如下截图:

五、恭喜你,万里长征已经走出了第一步!!!

如果有过web开发经验的你,
一定觉得很容易理解和学习React-Native,
所以这一小步也是一大步

千里之行, 始于足下.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,137评论 6 511
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,824评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,465评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,131评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,140评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,895评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,535评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,435评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,952评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,081评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,210评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,896评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,552评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,089评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,198评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,531评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,209评论 2 357

推荐阅读更多精彩内容