Getting Started with React Native and Understanding Flexbox Layout

Flexbox layout is a layout method proposed by W3C in 2009 to replace the CSS box model on the Web side.

ReactNative implements most of the functionality of Flexbox layouts.

 

The properties used by Flexbox layout can be basically divided into two categories:

1. Properties that determine the arrangement rules of child components, such as: flexDirection , flexWrap, justifyContent, alignItems, etc.
2. Properties that determine their own display rules, such as: alignSelf, flex, etc.

 

[1] flexDirection

　　　　Set the arrangement order of subcomponents, the default column (vertical arrangement), other rows (horizontal arrangement)

Code:

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.view1}></View>
          <View style={styles.view2}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1 ,
     // justifyContent: 'center', 
    // alignItems: 'center', 
    flexDirection: 'row' , // here is explicitly declared as row, it will be arranged horizontally, otherwise it will be arranged vertically by default
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center' ,
    margin: 10,
  },
  instructions: {
    textAlign: 'center' ,
    color: '#333333',
    marginBottom: 5 ,
  },
  view1: {
    height: 150,
    width: 150,
    backgroundColor: 'red'
  },
  view2: {
    height: 150,
    width: 150,
    backgroundColor: 'green'
  }
});

As shown in the figure:

 

[2] flexWrap 

　　Set whether to wrap, the default value is nowrap (no wrap), other wrap

 

When we change the width of the two child Views to 200, the green box will overflow the screen and only show half

  view1: {
    height: 200,
    width: 200,
    backgroundColor: 'red'
  },
  view2: {
    height: 200,
    width: 200,
    backgroundColor: 'green'

As shown in the figure:

 

Change the container style to wrap, and the overflowing green box will start on a new line.

 

 

[3] justifyContent

　　　　The justifyContent property indicates where the component's child components are positioned horizontally in their parent's container.

　　　　Values ​​are: flex-start, flex-end, center, space-between, space-around

　　　

  container: {
    flex: 1,
    //justifyContent: 'center',
    //alignItems: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around' , //modified this line
    backgroundColor: '#F5FCFF',
  },

flex-start: stick left

flex-end: stick right

center: The subcomponent group is centered horizontally

space-between: whitespace is in the middle of child components

space-around: whitespace around subcomponents (on both sides of each subcomponent)

 

[4] alignItems

　　The property indicates where the component's child components are vertically arranged in their parent container.　　

　　 Values: flex-start, flex-end, center, baseline, stretch

center :  the vertical centering of the parent container of the child component group

flex-start: stick to the top of the parent container

flex-end: stick to the bottom of the parent container

Baseline: The phenomenon is consistent with flex-start (to be supplemented)

stretch: The phenomenon is consistent with flex-start (to be supplemented)

 

[5] alignSelf

　　Indicates the arrangement of a particular component

　　Values: flex-start, flex-end, center, stretch

center: The current component is centered based on the layout of the parent component (when the parent layout is arranged horizontally, it is centered vertically; when it is arranged horizontally, it is centered vertically)

flex-start: The current component is pasted to the left after the layout of the parent component (same as above)

flex-end: The current component is pasted to the right after the layout of the parent component (same as above)

[6] flex

　　The flex property allows the component to dynamically calculate and configure the space occupied by itself. The value is a numerical value.

Code:

  container: {
    flex: 1 , //The flex of this parent layout is required, it represents its weight in its parent layout, if not, it will be blank
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center' ,
    margin: 10,
  },
  instructions: {
    textAlign: 'center' ,
    color: '#333333',
    marginBottom: 5 ,
  },
  view1: {
    flex: 1,
    backgroundColor: 'red'
  },
  view2: {
    flex: 1,
    backgroundColor: 'green'
  }

result:

 

It can be seen that flex, similar to Android's weight (proportion), takes out and compares the flex elements of the child layout of the parent layout to calculate its actual size.

When the flex property of the green component is changed to 2, the green component occupies two-thirds of the parent layout. The larger the flex, the more space it occupies in the parent layout.