瞎扯 [占位置,待完善]
不管是在 App ,Web 设置是 任何可见的页面, 布局都是很重要的. 一个好的布局,可以让你的页面更加优雅.
ReactNative 中, 可以使用 CSS3 的 Flex布局, 使用方法基本一样, 并且RN中,都是支持的.
这里的内容主要是从一个ReactNative布局教程里面截取出来学习的, 文章链接放在了底部. 很详细的讲解了布局相关的内容.
1. 宽度单位, 像素密度
ReactNative 不支持百分比的宽度, 因此 设置宽度的时候,不需要写 单位
<view style={{width:100}}></view>
Q: 既然不需要写单位, 那么 100 指的是啥呢? 100px 还是 100pt?
Paste_Image.png
单位是 pt
Q: 如何获取实际像素?(图片高清化很重要,100100的图片,如果宽高设置为100100 , 图片就会模糊,因为屏幕 高清屏)
宽高设置为100 * 100 ,图片要求是 100 * pixelRatio
//react 提供了PixelRatio 的获取方式https://facebook.github.io/react-native/docs/pixelratio.html
var image = getImage({
width: 200 * PixelRatio.get(),
height: 100 * PixelRatio.get()
});
<Image source={image} style={{width: 200, height: 100}} />
2. Flex 布局
Q: DIV不设置宽度, 会占 100% ,那么 RN中的 Text, View 等之类的呢?
不设置宽度, 默认100%占满容器
Q: 水平 垂直 居中
alignItems: 'center', //水平居中
justifyContent: 'center' //垂直居中
<Text style={[styles.text, styles.header]}>
水平垂直居中
</Text>
<View style={{height: 100, backgroundColor: '#333333', alignItems: 'center', justifyContent: 'center'}}>
<View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/>
</View>
总结
总结
- react 宽度基于pt为单位， 可以通过Dimensions 来获取宽高，PixelRatio 获取密度，如果想使用百分比，可以通过获取屏幕宽度手动计算。
- 基于flex的布局
- view默认宽度为100%
- 水平居中用alignItems, 垂直居中用justifyContent
- 基于flex能够实现现有的网格系统需求，且网格能够各种嵌套无bug
- 图片布局
- 通过Image.resizeMode来适配图片布局，包括contain, cover, stretch
- 默认不设置模式等于cover模式
- contain模式自适应宽高，给出高度值即可
- cover铺满容器，但是会做截取
- stretch铺满容器，拉伸
- 定位
- 定位相对于父元素，父元素不用设置position也行
- padding 设置在Text元素上的时候会存在bug。所有padding变成了marginBottom
- 文本元素
- 文字必须放在Text元素里边
- Text元素可以相互嵌套，且存在样式继承关系
- numberOfLines 需要放在最外层的Text元素上，且虽然截取了文字但是还是会占用空间
