IOS react Native Flexbox Detailed and Example _ios

IOS react Native Flexbox Detailed and data collation,

# Preface

Learning this series of content needs to have a certain HTML development base, no basic friends can go to HTML 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 Box model, depending on display, position, float properties, which for some such as Center vertically 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 can literally be understood as a general-purpose rectangular container that can easily change to adapt to the changing conditions of the outside world, which is what we often hear Flexible layout, and its purpose isA flexible way to space the contents of the seventh and distribution containers, allowing them to use different screens, providing 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 can solve the following problems in development

1. Floating layout
2. Center horizontally and vertically
3. Auto Assign width
4. All kinds of models screen fitting
5. The size, location, etc. of the dynamic allocation subset

As shown in the following illustration, in CSS, the general layout is based on the block and inline flow direction, whereas the flex layout is based onFlexflow流the "container defaults to exist two axes: Horizontal spindle(main axis)and Vertical cross axis(cross axis), the beginning of the main axis (and the intersection of the border) is called main start, the end of the position is called main; The start position of the cross axis is called Cross start, and the end position is called the cross ending. 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

For a better example to follow, let's take a look at how to get the size and resolution of the main screen.

First, we need to import theDimensionslibrary first
// 导入类库 var Dimensions = require('Dimensions');

You can then use variables to get theDimensionsheight, width, resolution, and so on of the screen where needed.

 Export default class Testrn extends Component {
    render () {return
      (
      <view style={styles.container}>< C4/><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// 样式 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 ');

  Import
  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:d Imensions.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 : Width:60,
      N,
    },
  });

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:Dimensions.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:Dimensions.get (' Window '). Width,
    //Set spindle direction
    flexdirection: ' Row ',
    //Set line wrapping Way
    flexwrap: ' Wrap '
  },

Effect:

FlexBox Common element Properties flex (abbreviation for Flex-grow, Flex-shrink, flex-basis three properties第二个参数和第三个参数是可选参数): 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 that you have 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 by the state we set, is notflex属性only 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:60, width:60, flex:3}}></View>

Effect:

Summing up the above example, you can see that, regardless of whether or not the width of the subproject is set, Flex ignores the width and zooms in on the above.公式

If we set the height, then flex will follow the height we set, without stretching, otherwise it will stretch the height

Depending on the flex feature, 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 us more detailed explanation FlexBox, if you think where write is not good or wrong, trouble message or use the way to contact me, of course, encounter problems can also, Finally, if you like my article, also please point a praise and attention, the reader's affirmation is the author's greatest encouragement, thank you!

Thank you for reading, I hope to help you, thank you for your support for this site!