<meta name="keywords" content="华夏棋牌,Native,React,之美" />
华夏棋牌 > web前端 > js教程 > 注释

RN结构的实例详解

原创 2017-07-18 17:37:04 0 90973
赞助会员专享特权

道具和状态
我们应用两种数据来控制一个组件:props和state.props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。关于须要改变的数据,我们须要应用状态。

浅易来讲,你须要在结构函数中初始化状态(译注:这是ES6的写法,早期的许多ES5的例子应用的是getInitialState措施来初始化状态,这一做法会徐徐被镌汰),然后在须要修改时挪用的setState措施。
华夏棋牌也就是说要刷新UI就是挪用的setState措施,改变组件的状态。

宽度单元和像素密度

华夏棋牌react的宽度不支持百分比,设置宽度时不须要带单元 {width: 10}, 那么10代表的详细宽度是若干呢?

华夏棋牌不知道是官网文档不全还是我眼瞎,横竖是没找到,那做一个实验自己找吧:

blob.png

默许用的是iPhone6的模拟器效果是:

blob.png

我们知道iPhone系列的尺寸以下图:

1.jpg

可以看到iphone 6的宽度为 375pt,对应了上边的375,因此可知react的单元为pt。 那若何取得现实的像素尺寸呢? 这对图片的高清化很主要,假定我的图片年夜小为100*100 px. 设置宽度为100 * 100. 那在iphone上的尺寸就是模糊的。 这个时间须要的图象年夜小应当是 100 * pixelRatio的年夜小 。

华夏棋牌react 供应了PixelRatio 的取得要领

blob.png

flex的结构

默许宽度

华夏棋牌我们知道一个div假定不设置宽度,默许的会占用100%的宽度, 为了验证100%这个效果, 做三个实验

  1. 根节点上方一个View, 不设置宽度

  2. 结实宽度的元素上设置一个View, 不设置宽度

  3. flex的元素上放一个View宽度, 不设置宽度

blob.png

2.jpg

华夏棋牌效果可以看到flex的元素假定不设置宽度, 都邑百分之百的占满父容器。

水平垂直居中

华夏棋牌css 里边经常会做的使命是去讲一个文本或许图片水平垂直居中,假定应用过css 的flexbox虽然知道应用alignItems 和 justifyContent . 那用react-native也来做一下实验

blob.png

3.jpg

网格结构

网格结构实验, 网格结构能够知足绝年夜多数的寻常开发需求,以是只需知足网格结构的spec,那么便可以证实react的flex结构能够知足正常开发需求

中分的网格

4.jpg

blob.png

左边结实, 左边结实,中央flex的结构

6.jpg

blob.png

嵌套的网格
通常网格不是一层的,结构容器都是一层套一层的, 以是必须验证在real world下面的网格结构

blob.png

blob.png

7.jpg

华夏棋牌幸亏没被我玩儿坏,可以看到上图的嵌套关系也是足够的严重年夜的,(我还加了一个ScrollView,然后再嵌套一切结构)嵌套多层的结构是没有用果的。

图片结构

首先我们得知道图片有一个stretchMode. 经由历程Image.resizeMode会见

找出有哪些mode

blob.png

考试考试应用这些mode

blob.png

8.jpg

100px 高度, 可以看到图片顺应100高度和全屏宽度,配景居中顺应未拉伸但是被截断也就是cover。

blob.png

9.jpg

contain 形式容器完全包容图片,图片自顺应宽高

blob.png

10.jpg

华夏棋牌cover形式同100px高度形式

blob.png

11.jpg

华夏棋牌stretch形式图片被拉伸顺应屏幕

blob.png

12.jpg

华夏棋牌随便实验了一下, 发现高度设置到父容器,图片flex的时间也会分歧于cover形式

相对定位和相对定位

blob.png

13.jpg

和css的尺度不合的是, 元素容器不用设置position:'absolute|relative' .

blob.png

14.jpg

华夏棋牌相对定位的可以看到很容易的合营margin做到了。 (我还担忧不克不及合营margin,以是测试了一下:-:)

padding和margin

我们知道在css中分辨inline元素和block元素,既然react-native完成了一个超级小的css subset。那我们就来实验一下padding和margin在inline和非inline元素上的padding和margin的应用情形。

padding

blob.png

15.jpg

在View上设置padding很顺遂,没有任何效果, 但是假定在inline元素上设置padding, 发现会泛起下面的弱点, paddingTop和paddingBottom都被挤成marginBottom了。 按理说,不应该对Text做padding处置赏罚赏罚, 但是确切有这样的效果存在,以是可以将这个效果mark一下。

margin

blob.png

16.jpg

我们知道,关于inline元素,设置margin-left和margin-right有用,top和bottom按理是不会掉效的, 但是上图的效果可以看到,现实是掉效了的。以是现在给我的感应是Text元素更应当明确为一个不克不及设置padding的block。

华夏棋牌算了不要猜了, 我们看看官方文档怎样说Text

blob.png

也就是假定Text元素在Text里边,可以推敲为inline, 假定伶仃在View里边,那就是Block。

下面会专门研究一下文内幕关的结构

文本元素

首先我们得推敲关于Text元素我们欲望有哪些功效或许想验证哪些功效:

  1. 华夏棋牌文字能否能自动换行?

  2. 华夏棋牌overflow ellipse?

  3. 华夏棋牌能否能对部门文字设置项目 ,类似span等标签

先看看文字有哪些支持的style属性

blob.png

实验1, 2, 3

blob.png

17.jpg

华夏棋牌从效果来看1,2,3取得验证。 但是不知道列位有没有发现效果, 为甚么底部空出了这么多空间, 没有设置高度啊。 我去除numberOfLines={5} 这行代码,效果以下:

18.jpg

以是现实上, 那段空间是文本撑开的, 但是文本被numberOfLines={5} 截取了,但是残剩的空间还在。 我猜这应当是个bug。

着实官方文档里边把numberOfLines={5}这句放到的是长文本的Text元素上的,也就是子Text上的。 现实效果是不掉效。 这应当又是一个bug。

Text元素的子Text元素的详细完成是怎样的, 感应这货会有许多bug, 看官文

blob.png

华夏棋牌Behind the scenes, this is going to be converted to a flat

NSAttributedString that contains the following information

blob.png

好吧, 那关于numberOfLines={5} 放在子Text元素上的那种bug倒是可以说清晰了了。

Text的项目一连

现实上React-native里边是没有项目一连这类说法的, 但是关于Text元素里边的Text元素,下面的例子可以看出存在一连。 那既然有一连,效果就来了!

现实是一连的最外层的Text的值呢,还是一连父亲Text的值呢?

blob.png

19.jpg

效果可见是直接一连父亲Text的。

总结

  1. 华夏棋牌react 宽度基于pt为单元, 可以经由历程Dimensions 来取得宽高,PixelRatio 取得密度,假设想应用百分比,可以经由历程取得屏幕宽度手动盘算。

  2. 基于flex的结构

    1. 华夏棋牌view默许宽度为100%

    2. 水平居中用alignItems, 垂直居中用justifyContent

    3. 基于flex能够完成现有的网格系统需求,且网格能够种种嵌套无bug

  3. 图片结构

    1. 经由历程Image.resizeMode来适配图片结构,网罗contain, cover, stretch

    2. 默许不设置形式即是cover形式

    3. contain形式自顺应宽高,给出高度值便可

    4. cover铺满容器,但是会做截取

    5. stretch铺满容器,拉伸

  4. 定位

    1. 定位相关于父元素,父元素不用设置position也行

    2. padding 设置在Text元素上的时间会存在bug。一切padding酿成了marginBottom

  5. 文本元素

    1. 文字必须放在Text元素里边

    2. 华夏棋牌Text元素可以相互嵌套,且存在项目一连关系

    3. 华夏棋牌numberOfLines 须要放在最外层的Text元素上,且虽然截取了文字但是还是会占用空间

华夏棋牌以上就是RN结构的实例详解的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码
  • 相关标签:Native React 之美
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 原生javascript完因素享到同伙圈功效 支持ios和android_javascript手艺
  • jQuery链式挪用与show知识浅析_jquery
  • JS完成登录页面记着密码和enter键登录措施推荐_javascript手艺
  • BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺
  • RN结构的实例详解
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    华夏棋牌ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173973)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(170118)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137410)

    ThinkPHP5实战之[教授修养治理系统]

    本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130767)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(130150)

    作者信息

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节