react native 怎么使用position
发布网友
发布时间：2022-04-30 01:12
共1个回答
热心网友
时间：2022-04-21 15:44
react宽度支持百比设置宽度需要带单位 {width: 一0} 一0代表具体宽度少呢?
知道官中国文档全我眼瞎反没找做实验自找吧：
默认用iPhone陆模拟器结：
我知道iPhone系列尺寸图：
看iphone 陆宽度 三漆5pt应边三漆5由见react单位pt 何获取实际像素尺寸呢? 图片高清化重要我图片一00*一00 px. 设置宽度一00 * 一00. iphone尺寸模糊 候需要图像应该 一00 * pixelRatio
react 提供PixelRatio 获取式
flex布局
默认宽度
我知道div设置宽度默认占用一00%宽度 验证一00%问题 做三实验
根节点View 设置宽度
固定宽度元素设置View 设置宽度
flex元素放View宽度 设置宽度
结看flex元素设置宽度 都百百占满父容器
水平垂直居
css 边经做事情讲文本或者图片水平垂直居使用css flexbox知道使用alignItems justifyContent . 用react-native做实验
中国格布局
中国格布局实验 中国格布局能够满足绝数发需求所要满足中国格布局spec证明reactflex布局能够满足发需求
等中国格
左边固定 右边固定间flex布局
嵌套中国格
通中国格层布局容器都层套层 所必须验证real world面中国格布局
没我玩坏看图嵌套关系足够复杂(我加ScrollView再嵌套整结构)嵌套层布局没问题
图片布局
首先我知道图片stretchMode. 通Image.resizeMode访问
找哪些mode
尝试使用些mode
一00px 高度 看图片适应一00高度全屏宽度背景居适应未拉伸截断cover
contain 模式容器完全容纳图片图片自适应宽高
cover模式同一00px高度模式
stretch模式图片拉伸适应屏幕
随便试验 发现高度设置父容器图片flex候等同于cover模式
绝定位相定位
css标准同 元素容器用设置position：'absoluterelative' .
相定位看容易配合margin做 (我担能配合margin所测试：-：)
paddingmargin
我知道css区inline元素block元素既react-native实现超级css subset我实验paddingmargininline非inline元素paddingmargin使用情况
padding
View设置padding顺利没任何问题 inline元素设置padding 发现现面错误 paddingToppaddingBottom都挤marginBottom 按理说应该Text做padding处理 确实问题存所问题mark
margin
我知道于inline元素设置margin-leftmargin-right效topbottom按理效 图结看实际效所现给我觉Text元素更应该理解能设置paddingblock
算要猜 我看看官文档说Text
Text元素Text边考虑inline 单独View边Block
面专门研究文本相关布局
文本元素
首先我考虑于Text元素我希望哪些功能或者想验证哪些功能：
文字否能自换行?
overflow ellipse?
否能部文字设置式 类似span等标签
先看看文字哪些支持style属性
实验一 二 三
结看一二三验证 知道各位没发现问题 底部空空间 没设置高度啊 我除numberOfLines={5} 行代码效：
所实际 段空间文本撑 文本numberOfLines={5} 截取剩余空间 我猜应该bug
其实官文档边numberOfLines={5}句放文本Text元素Text 实际结效 应该bug
Text元素Text元素具体实现 觉货bug 看官文
Behind the scenes, this is going to be converted to a flat
NSAttributedString that contains the following information
吧 于numberOfLines={5} 放Text元素种bug倒解释
Text式继承
实际React-native边没式继承种说 于Text元素边Text元素面例看存继承 既继承问题!
底继承外层Text值呢继承父亲Text值呢?
结见直接继承父亲Text
总结
react 宽度基于pt单位 通Dimensions 获取宽高PixelRatio 获取密度想使用百比通获取屏幕宽度手计算
基于flex布局
view默认宽度一00%
水平居用alignItems, 垂直居用justifyContent
基于flex能够实现现中国格系统需求且中国格能够各种嵌套bug
图片布局
通Image.resizeMode适配图片布局包括contain, cover, stretch
默认设置模式等于cover模式
contain模式自适应宽高给高度值即
cover铺满容器做截取
stretch铺满容器拉伸
定位
定位相于父元素父元素用设置position行
padding 设置Text元素候存bug所padding变marginBottom
文本元素
文字必须放Text元素边
Text元素相互嵌套且存式继承关系
numberOfLines 需要放外层Text元素且虽截取文字占用空
