炽天使的羽翼


  • 首页

  • 分类

  • 归档

  • 标签

  • 关于

  • 留言

React Native 浅入门 —— 结构篇

发表于 2015-08-10 | 分类于 React Native |

权当一个笔记,再写写或许更明白点

结构布局

说到布局,首先作为一个前端同学,我想到的是:div、p、span、section … 以及 article、header、footer…

这些非语义化的&语义化的标签,在前端的世界中,是用于按层级、按语义去实现一个可读的结构。

一个经典的 HTML 结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<header>
<nav>
<ul>
<li>首页</li>
<li>文章列表</li>
</ul>
</nav>
</header>
<section id="article-list">
<h1>文章列表</h1>
<article>
<header>
<hgroup>
<h1>title</h1>
<h2>作者</h2>
</hgroup>
</header>
<section>
<p>第一段</p>
<p>第二段</p>
</section>
<aside>
<ul>
<li>tag1</li>
<li>tag2</li>
</ul>
</aside>
</article>
...
</section>
<footer>
CopyRight
</footer>

写 HTML 的时候,我们往往是直接就设计完了这样的一个结构,一个 big picture,当然我们还是先按大块设计,再去设计细节!不过在设计结构的时候,基本一直都能看到完整的东西。

而在 React Native 中,讲究的是 Component 的复用,是不断的分层/块去编写 Component,但是只有在那个 Component 中才能看到再进一步的结构,因为往往是“你只需要使用我就好了,不需要关心我怎么显示的。”

React 也是一样,不信去看最终 React 展现到浏览器中的样子吧,还是那么一堆 div 标签,干读基本读晕。

话题转回来,我们要这么展现文章列表:

阅读全文 »

React Native 浅入门

发表于 2015-08-10 | 分类于 React Native |

作为一个前端,怎么可能不去尝一下 React Native,这位号称“learn once, write anywhere”的家伙。

learn once, write anywhere

浅尝之后,觉得还是有必要简单的进行一下总结,主要就是从前端的角度罢,看是否可转换或者从“老前端”的角度来学习和使用 React Native。

权当一个笔记,再写写或许更明白点

有些需要注意的地方,也顺手写在这里:

阅读全文 »
12
Leo Wang

Leo Wang

12 日志
4 分类
15 标签
GitHub Twitter 微博 知乎
© 2017 Leo Wang
由 Hexo 强力驱动
主题 - NexT.Pisces