Introduction and use of the flexbox of react native _native

Objective

Learning this series of content needs to have a certain HTML development base, no foundation of friends can go to the HTML QuickStart (i) Learning

I contact react Native time is not particularly long, so the content and nature of the understanding may be biased, in the study if there is a mistake in time to modify the content, but also welcome the friends of omnipotent criticism pointed out, thank you

The first edition of the article from Jane Book, if there is a picture or page display problems, please turn to Jane book to see also want to like friends can point praise, thank you what is FlexBox layout

In HTML, the interface is built using CSS layout, CSS is based on the box model, depending on display, position, float properties, which for some such as vertical center of the special layout is very inconvenient

Flex is a new layout for WEB and mobile development that makes it easy, complete, and responsive for a variety of page layouts, and all of the current browsers already support this layout, so no compatibility issues are considered

FlexBox is literally understood to be: a general-purpose rectangular container that can easily change to adapt to the changing conditions of the outside world, the elastic layout we often hear, and its purpose is to seventh and distribute the space of the contents of the container in a flexible way so that it can use different screens, Provides maximum flexibility for boxed models (this is similar to the atuolayout layout in IOS development)

The main idea of FlexBox layout is to allow the container to have the ability to change the width, height, or even order of its subprojects, thus achieving the best way to fill the available space

The FlexBox in React Native is a subset of this specification.

To sum up, FlexBox is used to solve the relationship between the parent box and the child box, the following figure

FlexBox in development can solve the following issues floating layout horizontal and vertical center automatic distribution width of various models screen adaptation dynamic allocation of subsets of the size, location and so on

As shown in the following illustration, in CSS, the general layout is based on the block and inline flow direction, and the flex layout is based on the Flexflow Flow "container defaults to two axes: the horizontal spindle (main axis) and the vertical cross axis (cross axis), and the starting position of the spindle (the intersection with the border) is called Main start, the ending position is called main end, and the start position of the cross axis is called Cross start, and the end position is called cross. The project is arranged by default along the main axis, the main axis space occupied by a single item is called main size, and the cross axis space occupied is called Cross size "

Depending on the arrangement of the telescopic project, the orientation of the spindle and the side axis will also change, as shown in the following figure

Get main Screen size

To better show the case later, let's take a look at how to get the size and resolution of the main screen first, we need to import Dimensions library first

    Import class Library
    var Dimensions = require (' Dimensions ');

You can then use the Dimensions variable to get the screen height, width, resolution, and so on where you need it.

    Export default class Testrn extends Component {
        render () {return
            (
            <view style={styles.container}>< C7/><text> width of the current screen: {dimensions.get (' window ') .width}</text>
                <Text> height of the current screen: {Dimensions.get ( ' window ') .height}</text>
            </View>
        }
    }

Set style

    Style
    Const STYLES = stylesheet.create ({
        container: {
            backgroundcolor: ' Blue '
        },
    });

Effect:

Now that you can get the size of the screen, you can set the size of the main view directly to the size of the screen, so that the view fills the entire screen

    Style
    Const STYLES = stylesheet.create ({
        container: {
            backgroundcolor: ' Blue ',
            height:d Imensions.get (' window '). Height,
            width:Dimensions.get (' window '). Width
        },
    });

Effect:
FlexBox Common Container Properties

To facilitate understanding, we first add a few views

// import class library
    var Dimensions = require ('Dimensions');

    // Entrance
    export default class TestRN extends Component {
        render () {
            return (
            <View style = {styles.container}>
                <View style = {styles.subViewStyle1}> </ View>
                <View style = {styles.subViewStyle2}> </ View>
                <View style = {styles.subViewStyle3}> </ View>
            </ View>
        );
    }
}

    // style
    const styles = StyleSheet.create ({
        container: {
            backgroundColor: 'blue',
            height: Dimensions.get ('window'). height,
            width: Dimensions.get ('window'). width
        },
        subViewStyle1: {
            backgroundColor: 'red',
            height: 60,
            width: 60,
        },
        subViewStyle2: {
            backgroundColor: 'yellow',
            height: 60,
            width: 60,
        },
        subViewStyle3: {
            backgroundColor: 'green',
            height: 60,
            width: 60,
        },
    });  

Effect:

Flexdirection (this property determines the direction in which the item is arranged, which is the direction of the spindle) row: The spindle is horizontal, the starting point is on the left side

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:Dimensions.get (' Window '). Width,
        //Set spindle direction
        flexdirection: ' Row '
    },

Effect:
Row-reverse: Spindle is horizontal, starting at right end

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:Dimensions.get (' window '). Width,
        //Set spindle direction
        flexdirection: ' Row-reverse '
    },

Effect:
Column (default): The main axis is vertical, starting from the top

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:d Imensions.get (' window '). Width,
        //Set spindle direction
        flexdirection: ' column '
    },

Effect:
Column-reverse: The spindle is perpendicular, the starting point is below

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:Dimensions.get (' Window '). Width,
        //Set spindle direction
        flexdirection: ' Column-reverse '
    },

Effect:

Justifycontent (defines the alignment of the telescopic item on the main axis) Flex-start (default): Telescopic project aligns to the starting position of a line

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:Dimensions.get (' window '). Width,
        //Set the alignment of the sub item on the Spindle
        justifycontent: ' Flex-start '
    },

Effect:
Flex-end: Telescopic items Snap to end of line

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:d Imensions.get (' window '). Width,
        //Set the alignment of the sub item on the Spindle
        justifycontent: ' Flex-end '
    },

Effect:
Center: Telescopic Project aligns to the middle of a line

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:Dimensions.get (' Window '). Width,//Set the alignment of the subproject on the
        spindle
        justifycontent: ' Center '
    },

Effect:
Space-between: Justified, the spacing between items is equal

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:Dimensions.get (' window '). Width,
        //Set the alignment of the sub item on the Spindle
        justifycontent: ' Space-between '
    },

Effect:
Space-around: Telescopic projects will be evenly distributed within the line, keeping half the space at both ends

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:d Imensions.get (' window '). Width,
        //Set the alignment of the sub item on the Spindle
        justifycontent: ' Space-around '
    },

Effect:

Alignitems (defines how the item is aligned on the cross axis, which you can think of as the alignment of the side axis (perpendicular to the spindle) Flex-start (default): Alignment of the starting point of the side axis axis

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:Dimensions.get (' Window '). Width,
        //Set how the item is aligned on the side axis
        alignitems: ' Flex-start '
    },

Effect:
Flex-end:

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:Dimensions.get (' window '). Width,
        //Set how the item is aligned on the side axis
        alignitems: ' Flex-end '
    },

Effect:
Center: Midpoint alignment of the side axis

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:d Imensions.get (' window '). Width,
        //Set how the item is aligned on the side axis
        alignitems: ' Center '
    },

Effect:
Stretch (default): If the item is not set to a height or set to auto, it fills the entire container height

    Container: {
        backgroundcolor: ' Blue ',
        comment out height
        //height:Dimensions.get (' window '). Height,
        //Width:d Imensions.get (' window '). Width,
        //Set how the item is aligned on the side axis
        alignitems: ' Stretch '
    },

Effect:

Flexwrap (by default, items are lined up on one axis, Flex-wrap property defines how to wrap if one axis is not aligned) nowrap (default): No Line wrapping

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:d Imensions.get (' window '). Width,
        //Set spindle direction
        flexdirection: ' Row ',
        //Set line wrapping Way
        flexwrap: ' nowrap '
    },

Effect:
Wrap: Line change, first line on top

    Container: {
        backgroundcolor: ' Blue ',
        height:Dimensions.get (' window '). Height,
        width:d Imensions.get (' window '). Width,
        //Set spindle direction
        flexdirection: ' Row ',
        //Set line wrapping Way
        flexwrap: ' Wrap '
    },

Effect:
FlexBox Common element properties

Flex (Flex-grow, Flex-shrink, flex-basis, abbreviation for three properties, second and third parameters are optional): The default value is "0 1 auto" width = elastic Width * (flexgrow/sum (FLEXGORW)) (important) First to do the experiment to see what Flex is, first of all, we first initialize a new view, easy to understand

    Import
    Export default class Testrn extends Component {
        render () {return
            (
            <view style={ Styles.container}>
                <view style={{backgroundcolor: ' Red ', height:60, width:60}}></view>
                < View style={{backgroundcolor: ' Green ', height:60, width:60}}></view>
                <view style={{backgroundcolor: ' Yellow ', height:60, width:60}}></view>
            </View>
        }

    } Style
    Const STYLES = stylesheet.create ({
        container: {
            backgroundcolor: ' Blue ',
            flex:1,
            // Set the spindle direction to horizontal, starting at left
            flexdirection: ' Row '
        },
    };

Effect:
Now we set flex to 1 for the red item, and you can see that the red item's width fills the part that removes the green items and the yellow item.

    <view style={{backgroundcolor: ' Red ', height:60, width:60, flex:1}}></view>

Effect:
And then to the green Project also set Flex to 1, you can see the red items and green items filled with the addition of yellow items, and red and green items each take up half of the remaining space

    <view style={{backgroundcolor: ' Red ', height:60, width:60, flex:1}}></view>, <view style={{
    BackgroundColor: ' Green ', height:60, width:60, flex:1}}></view>

Effect:
Now we set the yellow item flex to 2, as you can see, the space between red and green is equal to the yellow item, and the red and green divide the space beyond the yellow item, now we should be able to understand the meaning of the formula above (Project width = the width of the parent project * (percentage of the subproject itself/ % of all parent projects)

    <view style={{backgroundcolor: ' Red ', height:60, width:60, flex:1}}></view>, <view style={{
    BackgroundColor: ' Green ', height:60, width:60, flex:1}}></view>
    <view style={{backgroundcolor: ' Yellow ', height:60, width:60, flex:3}}></view>

Effect:
But I do not know you found no, although each of our subprojects have set both the height and width, but only the width of the change, and the height has been maintained that we set the state, is not the Flex attribute only to the width of the valid. Next we'll change the code to see if it's really as we think it is ———— here we remove the height of the green, and we can see that the height of the green project fills the height of the entire parent project.

    <view style={{backgroundcolor: ' Red ', height:60, width:60, flex:1}}></view>, <view style={{
    BackgroundColor: ' Green ', width:60, flex:1}}></view>
    <view style={{backgroundcolor: ' Yellow ', height : Width:60, flex:3}}></view>

Effect:
Summing up the examples above, you can see that, regardless of whether or not to set the width of the subproject, Flex will ignore the width, according to the formula above to scale, if we set the height, then flex will follow the height we set, not to stretch, vice versa will be stretched to stretch according to flex characteristics, If you do not set the view size, using Flex can also make the view fill the entire screen

    Container: {
        backgroundcolor: ' Blue ',
        flex:1
    },

Alignself (allows individual items to be aligned differently than other items, overriding Align-items properties) Auto (default): Inherits the Alignitems property of the parent element, and if not, switches to stretch

    SubViewStyle2: {
        backgroundcolor: ' Yellow ',
        height:60,
        width:60,
        alignself: ' Auto '
    },

Effect:
Flex-start: Project starting from the starting point of the side axis

    SubViewStyle2: {
        backgroundcolor: ' Yellow ',
        height:60,
        width:60,
        alignself: ' Flex-start '
    } ,

Effect:
Flex-end: Project starts at the end of the side axis

    SubViewStyle2: {
        backgroundcolor: ' Yellow ',
        height:60,
        width:60,
        alignself: ' Flex-end '
    } ,

Effect:
Center: The project takes the centre of the side axis as a reference

    SubViewStyle2: {
        backgroundcolor: ' Yellow ',
        height:60,
        width:60,
        alignself: ' Center '
    },

Effect:
Stretch

    SubViewStyle2: {
        backgroundcolor: ' Yellow ',
        height:60,
        width:60,
        alignself: ' Stretch '
    },

Effect:
We FlexBox the use of a simple introduction to here, in the follow-up article, will be in the actual development scene with you more detailed explanation FlexBox, if you think where write is not good or wrong, trouble message or use the way of the mailbox contact me, of course, encounter problems can also , and finally, if you like my article, also please point a praise and attention, the reader's affirmation is our author's greatest encouragement, thank you.