Open 6174 opened 9 years ago
:+1: 学习了
点赞好评!很有质量的文章
:clap::clap::clap:
:+1:
:+1:
:+1:
很赞,对于因为react-native才去了解react的我很有帮助
相比看原版的英文文档更清晰,细腻,赞,持续关注
很好的文章,赞!👍
提个小bug,开头的第一个例子的输出少了一个: pxielRatio=2
@tonylinyy 已修改 thx!
Good Job!
SF那篇同款也是楼主的吗?赞!
不错,很好的总结,可以对照走
@hkongm 是的,同款
所以默认主轴是垂直方向哎。。一直按照flexbox的理解把justify和alignitem搞反了。。
<Image style={{flex: 1, height: 100, resizeMode: Image.resizeMode.contain}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />
这里的height: 100 应该是100pt吧
出个中文文档就好了
火前留名
赞一个
Good!
赞
mark
好文,赞~
赞
不错
怒赞
请问一下,
<Image source = require('image!image_name')/>
怎么和PixelRatio一起使用?谢谢!
不错,好文章
学习了,赞!
谢谢!
学习了
nice
很不错
mark
good!
图片的resizeMode 我设置在Props生效,设置在style不生效:https://facebook.github.io/react-native/docs/image.html#resizemode
RN版本:0.26
good
贵猫的大神,问个问题,你们如何解决rem在 魅族,华为荣耀系列的手机下的不兼容的? 我做了一个测试,设置 1rem = 50px ,然后给一个div设置 1rem 的宽, 在华为荣耀c3下打印出来 这个div的宽度为 57px 这个怎么破? 求解....
很nice!
赞。。
nice
👍
您好,请问有没有试过,alignSelf:'flex-end'后,view的高度就失效了
宽度单位和像素密度
react的宽度不支持百分比,设置宽度时不需要带单位
{width: 10}
, 那么10代表的具体宽度是多少呢?不知道是官网文档不全还是我眼瞎,反正是没找到,那做一个实验自己找吧:
默认用的是iphone6的模拟器结果是:
我们知道iphone系列的尺寸如下图:
可以看到iphone 6的宽度为 375pt,对应了上边的375,由此可见react的单位为pt。 那如何获取实际的像素尺寸呢? 这对图片的高清化很重要,如果我的图片大小为100100 px. 设置宽度为100 * 100. 那在iphone上的尺寸就是模糊的。 这个时候需要的图像大小应该是 100 \ pixelRatio的大小 。
react 提供了PixelRatio 的获取方式https://facebook.github.io/react-native/docs/pixelratio.html
flex的布局
默认宽度
我们知道一个div如果不设置宽度,默认的会占用100%的宽度, 为了验证100%这个问题, 做三个实验
结果可以看到flex的元素如果不设置宽度, 都会百分之百的占满父容器。
水平垂直居中
css 里边经常会做的事情是去讲一个文本或者图片水平垂直居中,如果使用过css 的flexbox当然知道使用
alignItems
和justifyContent
. 那用react-native也来做一下实验网格布局
网格布局实验, 网格布局能够满足绝大多数的日常开发需求,所以只要满足网格布局的spec,那么就可以证明react的flex布局能够满足正常开发需求
等分的网格
左边固定, 右边固定,中间flex的布局
嵌套的网格
通常网格不是一层的,布局容器都是一层套一层的, 所以必须验证在
real world
下面的网格布局好在没被我玩儿坏,可以看到上图的嵌套关系也是足够的复杂的,(我还加了一个ScrollView,然后再嵌套整个结构)嵌套多层的布局是没有问题的。
图片布局
首先我们得知道图片有一个stretchMode. 通过Image.resizeMode访问
找出有哪些mode
打印出来的是 contain, cover, stretch 这几种模式, (官方文档不知道为什么不直接给出)
尝试使用这些mode
100px 高度, 可以看到图片适应100高度和全屏宽度,背景居中适应未拉伸但是被截断也就是cover。
contain 模式容器完全容纳图片,图片自适应宽高
cover模式同100px高度模式
stretch模式图片被拉伸适应屏幕
随便试验了一下, 发现高度设置到父容器,图片flex的时候也会等同于cover模式
绝对定位和相对定位
和css的标准不同的是, 元素容器不用设置
position:'absolute|relative'
.相对定位的可以看到很容易的配合margin做到了。 (我还担心不能配合margin,所以测试了一下:-:)
padding和margin
我们知道在css中区分inline元素和block元素,既然react-native实现了一个超级小的css subset。那我们就来实验一下padding和margin在inline和非inline元素上的padding和margin的使用情况。
_padding _
在View上设置padding很顺利,没有任何问题, 但是如果在inline元素上设置padding, 发现会出现上面的错误, paddingTop和paddingBottom都被挤成marginBottom了。 按理说,不应该对Text做padding处理, 但是确实有这样的问题存在,所以可以将这个问题mark一下。
margin
我们知道,对于inline元素,设置margin-left和margin-right有效,top和bottom按理是不会生效的, 但是上图的结果可以看到,实际是生效了的。所以现在给我的感觉是Text元素更应该理解为一个不能设置padding的block。
算了不要猜了, 我们看看官方文档怎么说Text,https://facebook.github.io/react-native/docs/text.html
也就是如果Text元素在Text里边,可以考虑为inline, 如果单独在View里边,那就是Block。 下面会专门研究一下文本相关的布局
文本元素
首先我们得考虑对于Text元素我们希望有哪些功能或者想验证哪些功能:
先看看文字有哪些支持的style属性
实验1, 2, 3
从结果来看1,2,3得到验证。 但是不知道各位有没有发现问题, 为什么底部空出了这么多空间, 没有设置高度啊。 我去除
numberOfLines={5}
这行代码,效果如下:所以实际上, 那段空间是文本撑开的, 但是文本被
numberOfLines={5}
截取了,但是剩余的空间还在。 我猜这应该是个bug。其实官方文档里边把
numberOfLines={5}
这句放到的是长文本的Text元素上的,也就是子Text上的。 实际结果是不生效。 这应该又是一个bug。Text元素的子Text元素的具体实现是怎样的, 感觉这货会有很多bug, 看官文
好吧, 那对于
numberOfLines={5}
放在子Text元素上的那种bug倒是可以解释了。Text的样式继承
实际上React-native里边是没有样式继承这种说法的, 但是对于Text元素里边的Text元素,上面的例子可以看出存在继承。 那既然有继承,问题就来了!
到底是继承的最外层的Text的值呢,还是继承父亲Text的值呢?
结果可见是直接继承父亲Text的。
总结
pt
为单位, 可以通过Dimensions
来获取宽高,PixelRatio
获取密度,如果想使用百分比,可以通过获取屏幕宽度手动计算。alignItems
, 垂直居中用justifyContent
Image.resizeMode
来适配图片布局,包括contain
,cover
,stretch
numberOfLines
需要放在最外层的Text元素上,且虽然截取了文字但是还是会占用空间