ReactNative从零到完整项目-弹性（Flex）宽高使用详解

项目连接： 93Laer/MyDemo

ReactNative使用手册

关键点：

• 1、在RN中宽高，size等使用的单位是dp，还是px
• 2、flex使用，以及动态阔张效果总结

由于在RN的官方文档中并未提起我们在对组件宽高或是字体大小设值，这个值是px还是dp。所以在正式开始讲解flex宽高使用前，先做一个实验，看看我们设值的到底是px,还是dp(当然我在RN中说px,dp可能不够准确，但是我们暂时这样理解吧，这个不重要)

获取屏幕的宽高

/**
 * 创建人：赖天兵
 * 时间： 2018/2/11
 * 简书：https://www.jianshu.com/u/2229fd214880
 * 掘金：https://juejin.im/user/58647e21128fe1006d0f3f3e
 * github：https://github.com/93Laer
 * 描述：
 */
import React,{Component}from 'react';
import {Text}from 'react-native'
var Dimensions = require('Dimensions');
var PixelRatio = require('PixelRatio');
export default class FlexboxTest extends Component{
    render() {
        return <Text >
            window.width={Dimensions.get('window').width + '\n'}
            window.height={Dimensions.get('window').height + '\n'}
            pxielRatio={PixelRatio.get()}
        </Text>
        //pxielRatio 像素比类似与安卓的display metrics，也就是dp和px的转化比例
    }
}
复制代码

结果截屏

可以看到我们获取到的屏幕宽度是411.4，高度是683.4，我的模拟器是1080 1920，所以从这个结果我们可以得到它的单位就是dp，也可以验证下1080=411.42.625，这里会有一点误差，因为我计算的宽其实是省略了很多小数的。

结论： 我们获取的屏幕宽高、设置的控件宽高、字体大小都是设置的dp

对控件设置宽高

//todo 控件宽高设置
        return <View>
            <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
            <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
            <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
        </View>
复制代码

提示： 从图上看得出一个容器在摆放子控件时默认是以列（column）方向排列的，而安卓是横向排列的

flex使用：

     在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。

前提：组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

 //todo flex 使用
        return<View style={{flex: 1}}>
            <Text style={{width: 50, height: 50,backgroundColor: 'powderblue'}} >文本1</Text>
            <Text style={{width: 50, height: 50, flex:1,backgroundColor: 'skyblue'}} >文本2</Text>
            <Text style={{width: 50, flex:1, height: 50,backgroundColor: 'red'}} >文本3</Text>
            <Text style={{ width: 50,flex:1, backgroundColor: 'steelblue'}} >文本4</Text>
            <Text style={{flex:1, backgroundColor: 'olive'}} >文本5</Text>
            <Text style={{flex:2, backgroundColor: 'green'}} >文本6</Text>
        </View>
复制代码

总结：

• 1、从文本1和文本2可以看出，加了flex:1会在父容器指定的方向上按等比扩展，子控件指定的height失效
• 2、从文本2和文本3可以看出，flex所呈现的效果与所加的位置无关，至于父容器的item排列方向有关
• 3、从文本4和文本5可以看出，当父容器对item的排列方向是column时，如果item指定了宽度，那么flex只对column方向有效，如果item没有指定宽度，那么flex会对row方向起作用，同理当父容器指定item排列方向是row时也一样。
• 4、从文本5和文本6可以看出，多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大

喜欢请点赞，或是关注，后续将完善发布更多的文章，你的鼓励就是我的动力（程序员最大的动力莫过于同行的鼓励）