react native Flex布局以及flex-grow、flex-shrink、flex-basis使用

 

本文主要結合RN項目對Flex布局進行說明，以及結合其他屬性打造RN布局，基礎篇可以參考另一篇文章：https://www.zybuluo.com/fuxinghua/note/1341470

Flex屬性

采用Flex布局的元素，即為Flex容器，容器內部所有子元素皆為容器成員，遵循Flex布局特性。相信看完上一篇文章對flex布局有了基本了解下面就不同布局進行講解。

 

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

React native項目中用到最多的是flex-direction、flex-wrap、justify-content、align-items。下面就基於常用布局為大家介紹Flex使用。

簡單橫向布局

 

return <View style={{width: width, height: 100, backgroundColor: '#aaa', marginTop: 40, flexDirection: 'row', alignItems: 'center'}}>
            <View style={{flex: 1, height: 100, backgroundColor: '#ffcccc'}}></View>
            <View style={{flex: 1, height: 100, backgroundColor: '#99ff99'}}></View>
            <View style={{flex: 1, height: 100, backgroundColor: '#66ffff'}}></View>
        </View>

或者

return <View style={{width: width, height: 100, backgroundColor: '#aaa', marginTop: 40 , flexDirection: 'row', justifyContent: 'space-between'}}>
            <View style={{flex: 1, backgroundColor: '#ffcccc'}}></View>
            <View style={{flex: 1,  backgroundColor: '#99ff99'}}></View>
            <View style={{flex: 1,  backgroundColor: '#66ffff'}}></View>
        </View>

 

簡單垂直布局

 

return <View style={{width: width, height: 100, backgroundColor: '#aaa', marginTop: 40, alignItems: 'center'}}>
            <View style={{flex: 1,  width: width, backgroundColor: '#ffcccc'}}></View>
            <View style={{flex: 1,  width: width, backgroundColor: '#99ff99'}}></View>
            <View style={{flex: 1,  width: width, backgroundColor: '#66ffff'}}></View>
        </View>

 或者

render() {
        return <View style={{width: width, height: 100, backgroundColor: '#aaa', marginTop: 40 , justifyContent: 'space-between'}}>
            <View style={{flex: 1, backgroundColor: '#ffcccc'}}></View>
            <View style={{flex: 1,  backgroundColor: '#99ff99'}}></View>
            <View style={{flex: 1,  backgroundColor: '#66ffff'}}></View>
        </View>
    }

水平均分布局

 

return <View style={{width: width, height: 100, backgroundColor: '#aaa', marginTop: 40 , flexDirection: 'row', justifyContent: 'space-around'}}>
            <View style={{width: 100, height: 100, backgroundColor: '#ffcccc'}}></View>
            <View style={{width: 100, height: 100, backgroundColor: '#99ff99'}}></View>
            <View style={{width: 100, height: 100, backgroundColor: '#66ffff'}}></View>
        </View>

通過設置主軸方向屬性即可：justifyContent

垂直均分布局

 

代碼

return <View style={{width: width, height: 100, backgroundColor: '#aaa', marginTop: 40 , justifyContent: 'space-between', alignItems: 'center'}}>
            <View style={{width: 100, height: 20, backgroundColor: '#ffcccc'}}></View>
            <View style={{width: 100, height: 20, backgroundColor: '#99ff99'}}></View>
            <View style={{width: 100, height: 20, backgroundColor: '#66ffff'}}></View>
        </View>

設置主軸方向屬性即可：justifyContent以及alignItems屬性即可實現，以上均為均分布局，當然我們也可以設置不同大小塊占據父布局。

 

return <View style={{width: width, height: 100, backgroundColor: '#aaa', marginTop: 40 , justifyContent: 'flex-start', alignItems: 'center'}}>
            <View style={{width: 100, height: 20, backgroundColor: '#ffcccc'}}></View>
            <View style={{width: 100, height: 20, backgroundColor: '#99ff99'}}></View>
            <View style={{width: 100, flexGrow: 1, backgroundColor: '#66ffff'}}></View>
        </View>

水平布局一樣，不在做介紹。

下面介紹一些常用的復雜布局，在我們編程開發過程中十分常見，也是基礎布局，供大家參考。

return <View style={{
            width: width,
            height: 200,
            backgroundColor: '#aaa',
            marginTop: 40,
            // justifyContent: 'flex-start',
            alignItems: 'center'
        }}>
            <View style={{width: width, height: 40, backgroundColor: '#0066FF'}}></View>
            <View style={{flexDirection: 'row', flexGrow: 1}}>
                <View style={{flex: 1, backgroundColor: '#ffcccc'}}></View>
                <View style={{flex: 3, backgroundColor: '#99ff99'}}></View>
                <View style={{flex: 1, backgroundColor: '#66ffff'}}></View>
            </View>
            <View style={{width: width, height: 40, backgroundColor: '#ff00ff'}}></View>
        </View>

render() {
        return <View>
            <View style={{
                marginTop: 50,
                width: width,
                height: 240,
                backgroundColor: 'gray',
                flexDirection: 'row',
                alignItems: 'center',
            }}>
                <View style={{width: width - 57}}>
                    <View style={{flex: 1, backgroundColor: '#FFF0F5', justifyContent: 'center'}}>
                        <Text>韓城深豐</Text>
                    </View>
                    <View style={{flex: 2, backgroundColor: '#FFF68F',}}>
                        <View style={{flex: 1, justifyContent: 'center', backgroundColor: '#FFA500'}}>
                            <Text numberOfLines={1}>韓城深豐潔汽車（B點汽車）最多一行展示，結尾顯示結尾顯示結尾顯示結尾顯示</Text>
                        </View>
                        <View style={{flex: 1, justifyContent: 'center'}}>
                            <View numberOfLines={1} style={{flexDirection: 'row', alignItems: 'center'}}>
                                <Image
                                    style={{width: 29, height: 39}}
                                    source={require('../../images/shop_address.png')}/>
                                <Text style={{marginLeft: 10}}>910.87km</Text>
                                <View style={{backgroundColor: 'red', width: 2, height: 24, marginLeft: 10}}></View>
                                <Text numberOfLines={1} style={{marginLeft: 10, flexShrink: 1}}>陝西省渭南市韓城市三維路大國際名三維路大國際名苑三維路大國際名苑</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={{width: 57, alignItems: 'center'}}>
                    <Image
                        style={{
                            width: 8,
                            height: 20,
                        }}
                        source={require('../../images/shop_back.png')}/>
                </View>
            </View>
            {/*<View style={{
                marginTop: 50,
                flexDirection: 'column',
                justifyContent: 'space-between',
                alignItems: 'center',
                width: width,
                height: 100,
                backgroundColor: 'gray'
            }}>
                <View style={{width: 50, height: 20, backgroundColor: 'red'}}></View>
                <View style={{width: 50, height: 20, backgroundColor: 'green'}}></View>
                <View style={{width: 50, height: 20, backgroundColor: 'blue'}}></View>
            </View>*/}
        </View>
    }

 以上為Flex布局實現的一些簡單布局demo，下面開始介紹flex-grow、flex-shrink、flex-basis

flex-grow

 flex-grow當然在RN中為：flexGrow 默認：default:0， 占據父布局中剩余空間，假設父布局的width為手機屏幕寬度，現在我們再假設view1、view2的width是100，那么剩余空間就是width-100*2。 這樣是不是在於動態寬度布局中有很好作用，我們可以均等分兩邊布局，中間全部占據，效果如下：

<View style={{width: width, height: 40, backgroundColor: '#0066FF'}}></View>
            <View style={{flexDirection: 'row', flexGrow: 1}}>
                <View style={{flex: 1, backgroundColor: '#ffcccc'}}></View>
                <View style={{flex: 3, backgroundColor: '#99ff99'}}></View>
                <View style={{flex: 1, backgroundColor: '#66ffff'}}></View>
            </View>
            <View style={{width: width, height: 40, backgroundColor: '#ff00ff'}}></View>

所以這里flex-grow就是索取父容器的剩余空間，默認值是0，就是三個子容器都不索取剩余空間。但是當view1設置寬度100，剩余空間width-100，就會view2和view3按照比例分割，

<View style={{flexDirection: 'row', flexGrow: 1}}>
                <View style={{width: 100, height: 120, backgroundColor: '#ffcccc'}}></View>
                <View style={{flexGrow: 1, backgroundColor: '#99ff99'}}></View>
                <View style={{flexGrow: 2, backgroundColor: '#66ffff'}}></View>
            </View>

flex-basis

flex-basis屬性值的作用和width相同。 子容器設置了flex-basis或者width，會在父容器占據這么多的空間，剩下空間進行分配，但是如果同時設置flex-basis和width，那么width屬性會被覆蓋，也就是說flex-basis的優先級比width高。有一點需要注意，如果flex-basis和width其中有一個是auto，那么另外一個非auto的屬性優先級會更高。

<View style={{width: width, height: 40, backgroundColor: '#0066FF'}}></View>
            <View style={{flexDirection: 'row', flexGrow: 1}}>
                <View style={{flexBasis: 80, backgroundColor: '#ffcccc'}}></View>
                <View style={{flexGrow: 1, backgroundColor: '#99ff99'}}></View>
                <View style={{flexGrow: 2, backgroundColor: '#66ffff'}}></View>
            </View>
            <View style={{width: width, height: 40, backgroundColor: '#ff00ff'}}></View>

這些都是子View寬度和沒有超過父布局寬度的，我們知道flex布局默認是不換行的，那么子View的寬度總和超過父容器的寬度呢，該如何解決呢？此時就會出現如下圖所示情況，這種情況該如何解決呢？這時flex-shrink就會顯示出其特殊的效果。

return <View style={{
            width: width,
            height: 400,
            backgroundColor: '#aaa',
            marginTop: 40,
            alignItems: 'center'
            // justifyContent: 'flex-start',
        }}>
            {/*<View style={{width: width, height: 40, backgroundColor: '#0066FF'}}></View>*/}
            {/*<View style={{flexDirection: 'c', flexGrow: 1, width: 400}}>*/}
                <View style={{width: 150, height: 150, backgroundColor: '#ffcccc'}}></View>
                <View style={{width: 150, height: 150, backgroundColor: '#99ff99'}}></View>
                <View style={{width: 150, height: 150, backgroundColor: '#66ffff'}}></View>
            {/*</View>*/}
            {/*<View style={{width: width, height: 40, backgroundColor: '#ff00ff'}}></View>*/}
        </View>

當我們設置最后一個View flexShrink: 1時，我們會發現超出容器的部分被收回去了，也就是壓縮了view3空間，使3個view仍然占據父容器的大小

return <View style={{
            width: width,
            height: 400,
            backgroundColor: '#aaa',
            marginTop: 40,
            alignItems: 'center'
            // justifyContent: 'flex-start',
        }}>
            {/*<View style={{width: width, height: 40, backgroundColor: '#0066FF'}}></View>*/}
            {/*<View style={{flexDirection: 'c', flexGrow: 1, width: 400}}>*/}
                <View style={{width: 150, height: 150, backgroundColor: '#ffcccc'}}></View>
                <View style={{width: 150, height: 150, backgroundColor: '#99ff99'}}></View>
                <View style={{width: 150, height: 150, backgroundColor: '#66ffff', flexShrink: 1}}></View>
            {/*</View>*/}
            {/*<View style={{width: width, height: 40, backgroundColor: '#ff00ff'}}></View>*/}
        </View>

flex-shrink

這個屬性其實就是定義一個子容器的壓縮比例，根據父容器剩余空間進行壓縮。應用場景：字數過多時顯示省略號，占滿不定寬（高） 容器空間等。例子如上圖，下圖省紅框實現就是利用該屬性

總結

 以上只是介紹在react native項目中flex布局使用情況，以及常用布局構建，希望給大家一個參考的例子。