react native flex 弹性布局 : flex / flexGrow / flexShrink / flexBasis 对比

结论

• 子view宽度之和 未 超过父view宽度，flex 等价于 flexGrow

父view宽度：pWidth
子view宽度：c1Width , c2Width , c3Width
子view flexGrow：c1FlexGrow , c2FlexGrow , c3FlexGrow
本demo中计算 flexGrow：
1、【父布局剩余宽度】 = pWidth300 - （c1Width50 + c2Width50 + c3Width50）= 150
2、child2 所占父布局剩余宽度 = 父布局剩余宽度150 * c2FlexGrow1 /（c2FlexGrow1 + c3FlexGrow1）= 75
3、child2 最终宽度 = c2Width + child2 所占父布局剩余宽度 = 50 + 75 = 125
4、同理child3 最终宽度 = 125
5、child2 最终宽度125 + child3 最终宽度125 + child1 最终宽度50 = 300

• 子view宽度之和 超过父view宽度，flex 等价于 flexShrink

父view宽度：pWidth
子view宽度：c1Width , c2Width , c3Width
子view flexShrink：c1FlexShrink , c2FlexShrink , c3FlexShrink
本demo中计算 flexShrink：
1、【超过父布局宽度】 = （c1Width150 + c2Width150 + c3Width150） - pWidth300 = 150
2、child2 所占超过父布局宽度 = 超过父布局宽度150 * c2FlexShrink1 /（c2FlexShrink1 + c3FlexShrink1）= 75
3、child2 最终宽度 = c2Width150 - child2 所占超过父布局宽度75 = 75
4、同理child3 最终宽度 = 75
5、child2 最终宽度75 + child3 最终宽度75 + child1 最终宽度150 = 300

• 子view宽度之和不管是否超过父view宽度，flexBasis 优先级高于 width

demo：

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

//子view宽度之和 未 超过父view宽度，flex 等价于 flexGrow
//子view宽度之和    超过父view宽度，flex 等价于 flexShrink
//子view宽度之和不管是否超过父view宽度，flexBasis 优先级高于 width

export default class Test2221 extends React.Component {

    render() {
        return (
            <View style={styles.container}>
                {/*-----------------子view宽度之和 未 超过父view宽度----------------*/}
                <Text style={styles.title}>子view宽度之和未超过父view宽度</Text>
                <View style={{width: 300}}>
                    <Text style={{color: '#ffffff'}}>width</Text>
                    <View style={styles.parent}>
                        <View style={{width: 50, backgroundColor: '#ff0000'}}/>
                        <View style={{width: 50, backgroundColor: '#00ff00'}}/>
                        <View style={{width: 50, backgroundColor: '#0000ff'}}/>
                    </View>
                    {/* 子view宽度之和 未 超过父view宽度，flex 等价于 flexGrow  */}
                    <Text style={{color: '#ffffff'}}>width + flex</Text>
                    <View style={styles.parent}>
                        <View style={{width: 50, backgroundColor: '#ff0000'}}/>
                        <View style={{width: 50, flex: 1, backgroundColor: '#00ff00'}}/>
                        <View style={{width: 50, flex: 1, backgroundColor: '#0000ff'}}/>
                    </View>
                    <Text style={{color: '#ffffff'}}>width + flexGrow</Text>
                    <View style={styles.parent}>
                        <View style={{width: 50, backgroundColor: '#ff0000'}}/>
                        <View style={{width: 50, flexGrow: 1, backgroundColor: '#00ff00'}}/>
                        <View style={{width: 50, flexGrow: 1, backgroundColor: '#0000ff'}}/>
                    </View>
                    <Text style={{color: '#ffffff'}}>width + flexShrink</Text>
                    <View style={styles.parent}>
                        <View style={{width: 50, backgroundColor: '#ff0000'}}/>
                        <View style={{width: 50, flexShrink: 1, backgroundColor: '#00ff00'}}/>
                        <View style={{width: 50, flexShrink: 1, backgroundColor: '#0000ff'}}/>
                    </View>
                    <Text style={{color: '#ffffff'}}>width + flexBasis</Text>
                    <View style={styles.parent}>
                        <View style={{width: 50, backgroundColor: '#ff0000'}}/>
                        <View style={{width: 50, flexBasis: 100, backgroundColor: '#00ff00'}}/>
                        <View style={{width: 50, flexBasis: 100, backgroundColor: '#0000ff'}}/>
                    </View>
                </View>

                {/*--------------------子view宽度之和超过父view宽度----------------------*/}
                <Text style={styles.title}>子view宽度之和超过父view宽度</Text>
                <View style={{width: 300}}>
                    <Text style={{color: '#ffffff'}}>width</Text>
                    <View style={styles.parent}>
                        <View style={{width: 150, backgroundColor: '#ff8041'}}/>
                        <View style={{width: 150, backgroundColor: '#761e99'}}/>
                        <View style={{width: 150, backgroundColor: '#ffff00'}}/>
                    </View>
                    {/* 子view宽度之和 超过 父view宽度，flex 等价于 flexShrink  */}
                    <Text style={{color: '#ffffff'}}>width + flex</Text>
                    <View style={styles.parent}>
                        <View style={{width: 150, backgroundColor: '#ff8041'}}/>
                        <View style={{width: 150, flex: 1, backgroundColor: '#761e99'}}/>
                        <View style={{width: 150, flex: 1, backgroundColor: '#ffff00'}}/>
                    </View>
                    <Text style={{color: '#ffffff'}}>width + flexGrow</Text>
                    <View style={styles.parent}>
                        <View style={{width: 150, backgroundColor: '#ff8041'}}/>
                        <View style={{width: 150, flexGrow: 1, backgroundColor: '#761e99'}}/>
                        <View style={{width: 150, flexGrow: 1, backgroundColor: '#ffff00'}}/>
                    </View>
                    <Text style={{color: '#ffffff'}}>width + flexShrink</Text>
                    <View style={styles.parent}>
                        <View style={{width: 150, backgroundColor: '#ff8041'}}/>
                        <View style={{width: 150, flexShrink: 1, backgroundColor: '#761e99'}}/>
                        <View style={{width: 150, flexShrink: 1, backgroundColor: '#ffff00'}}/>
                    </View>
                    <Text style={{color: '#ffffff'}}>width + flexBasis</Text>
                    <View style={styles.parent}>
                        <View style={{width: 150, backgroundColor: '#ff8041'}}/>
                        <View style={{width: 150, flexBasis: 100, backgroundColor: '#761e99'}}/>
                        <View style={{width: 150, flexBasis: 100, backgroundColor: '#ffff00'}}/>
                    </View>
                </View>
                {/*    */}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#000000',
    },
    parent: {
        marginTop: 10,
        height: 30,
        flexDirection: 'row',
        backgroundColor: '#ffffff',
    },
    title: {
        color: '#ffffff',
        textAlign: 'center',
        alignItems: 'center',
    },
});

效果图：