ReactNative_布局

• 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元素上，且虽然截取了文字但是还是会占用空间

<Text style={[styles.text, styles.header]}>
    水平居中
</Text>
// 使用alignItems 和 justifyContent
<View style={{height: 100, backgroundColor: '#333333', alignItems: 'center'}}>
    <View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/>
</View>

<Text style={[styles.text, styles.header]}>
    垂直居中
</Text>
<View style={{height: 100, backgroundColor: '#333333', justifyContent: 'center'}}>
    <View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/>
</View>

<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>

'use strict';

flexContainer: {
    // 容器需要添加direction才能变成让子元素flex  column:列  row:行
    flexDirection: 'row'
},
cell: {
    flex: 1,
    height: 50,
    backgroundColor: '#aaaaaa'
},
var keys = Object.keys(Image.resizeMode).join(' ');
// 打印出来的是 contain, cover, stretch 这几种模式

<Image style={{flex: 1, height: 100, resizeMode: Image.resizeMode.contain}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />

/**
 *
 * stretch模式图片被拉伸适应屏幕
 * cover模式同100px高度模式
 * 100px 高度， 可以看到图片适应100高度和全屏宽度，背景居中适应未拉伸但是被截断也就是cover
 *    contain 模式容器完全容纳图片，图片自适应宽高
 *
 * */