Introduction and use of the flexbox of react native _native

Source: Internet
Author: User
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.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.