React Native Knowledge 1-FlexBox layout content, react1-flexbox

React Native Knowledge 1-FlexBox layout content, react1-flexbox

I. Theoretical knowledge points

1: What is FlexBox layout?

The Flexible Box Module, also known as Flexbox, is an "elastic layout" designed to elastically align and distribute The space of content in The container, enables it to adapt to different screens, providing maximum flexibility for the boxed model.

The main idea of Flex layout is to enable the container to enable its sub-projects to change its width, height (or even order) and fill the available space in the best way;

2: The Flex layout is based on the flex-flow stream.

The container has two axes by default:Horizontal spindle (Main axis)AndVertical Cross axis (Cross axis). The starting position (intersection with the border) of the spindle is called main start, and the ending position is called main end. The starting position of the cross axis is called cross start, and the ending position is called cross end.

Projects are arranged along the main axis by default. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

 

The direction of the spindle and the side axis varies according to the scaling project arrangement.

3: In React, Flexbox has 6 container attributes and 6 project attributes. In React Native, there are four container attributes and two project attributes, respectively:

Container properties: flexDirection flexWrap justifyContent alignItems

Project property: flex alignSelf

3.1: flexDirection container attributes: 'row | row-reverse | column-reverse'

This attribute determines the direction of the spindle (that is, the direction of the project ).

Row: the spindle is in the horizontal direction and the start point is at the left end.

Row-reverse: the spindle is in the horizontal direction and the start point is in the right end.

Column (default): The main axis is vertical and the starting point is in the upper edge.

Column-reverse: the spindle is vertical and the start point is in the bottom edge.

 

3.2: flexWrap container attributes: 'nowrap | wrap-reverse'

By default, projects are arranged on a line (also known as "axis. The flex-wrap attribute definition defines how to wrap a line if an axis does not fit.

 

3.2.1 nowrap (default): Do not wrap

 

3.2.2 wrap: line feed. The first line is above

 

3.2.3 wrap-reverse: line feed. The first line is below. (Opposite to wrap)

 

3.3: justifyContent container attributes: 'flex-start | flex-end | center | space-between | space-und'

Defines the alignment of a scaling project on the main axis.

Flex-start (default): The scaling project is aligned with the start position of a row.

Flex-end: the scaling project is aligned to the end position of a row.

Center: The scaling project is aligned to the center of a row.

Space-between: the two ends are aligned, and the interval between projects is equal.

Space-around: the scaling project is evenly distributed across rows, with half of the space reserved at both ends.

 

3.4: alignItems container attributes: 'flex-start | flex-end | center | baseline | stretch'

Define how the project is aligned on the cross axis. You can think of it as an "alignment" of the side axis (perpendicular to the main axis ".

Flex-start: the starting point of the cross axis.

Flex-end: the end point of the cross axis.

Center: the center of the cross axis.

Baseline: baseline alignment of the first line of text of the project.

Stretch (default): if the project is not set to height or set to auto, the height of the entire container is fully occupied.

 

3.5: flex project attributes:

Abbreviations of "flex-grow", "flex-shrink", and "flex-basis" attributes, the second and third parameters (flex-shrink, flex-basis) is an optional parameter. The default value is "0 1 auto ".

Width = elastic width * (flexGrow/sum (flexGorw ))

3.6: alignSelf project attributes:

"Auto | flex-start | flex-end | center | baseline | stretch"

The align-self attribute allows a single project to have an align-items attribute different from other projects.

The default value is auto, indicating that the align-items attribute of the parent element is inherited. If no parent element exists, it is equivalent to stretch.

 

Ii. code example:

1: simple layout

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';class ReactNativeProject extends Component {  render() {    return (      <View style={styles.container}>      <View style={styles.viewItem1}>      </View>      <View style={styles.viewItem2}>      </View>      <View style={styles.viewItem3}>      </View>      <View style={{flex:2,backgroundColor:'#bbceee',flexDirection:'row'}}></View>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1  },  viewItem1:{    flex:1,    flexDirection:'row',    height:50,    backgroundColor:'#FF33CC'  },  viewItem2:{    flex:1,    flexDirection:'row',    height:50,    marginTop:15,    backgroundColor:'#00FFFF'  },  viewItem3:{    flex:1,    flexDirection:'row',    height:50,    backgroundColor:'#CCBBFF'  },});AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

:

Note: The return result can only be one object. Therefore, four views are placed in the outermost layer and arranged;

The flex attribute of the last View makes it more important than other permissions, so the height will be a factor of other corresponding values. The above two statements are separate, one is to write the style attributes below, and the other is to write the style directly in the layout. Note their differences and we recommend that you write them separately; the four sub-views are arranged in the flexDirection row mode;

2: Layout attribute usage:

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';class ReactNativeProject extends Component {  render() {    return (      <View style={styles.container}>      <View style={styles.viewItem1}>          <View style={{flex:1,height:40,backgroundColor:'red'}}></View>          <View style={{flex:1,height:40,backgroundColor:'blue',alignSelf:'center'}}></View>          <View style={{flex:1,height:40,backgroundColor:'red',alignSelf:'flex-end'}}></View>      </View>      <View style={styles.viewItem2}>          <View style={styles.viewItem2Child1}>          </View>          <View style={styles.viewItem2Child2}>          </View>      </View>      <View style={styles.viewItem3}>          <View style={styles.viewItem3Child1}>          </View>          <View style={styles.viewItem3Child2}>          </View>          <View style={styles.viewItem3Child3}>          </View>      </View>      <View style={{flex:2,backgroundColor:'#bbceee',flexDirection:'row'}}>          <View style={{flex:1,height:100,flexDirection:'row',justifyContent:'center',marginTop:30}}>            <View style={{width:100,backgroundColor:'red'}}></View>            <View style={{width:70,backgroundColor:'blue'}}></View>          </View>        </View>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1  },  viewItem1:{    flex:1,    flexDirection:'row',    height:50,    backgroundColor:'#FF33CC'  },  viewItem2:{    flex:1,    flexDirection:'row',    height:50,    marginTop:15,    backgroundColor:'#00FFFF',    flexWrap:'wrap'  },  viewItem2Child1:  {    width:200,    height:30,    backgroundColor:'green'  },  viewItem2Child2:  {    width:200,    height:30,    backgroundColor:'red'  },  viewItem3:{    flex:1,    flexDirection:'row',    height:50,    backgroundColor:'#CCBBFF'  },  viewItem3Child1:{    flex:1,    backgroundColor:'#00ffbb'  },  viewItem3Child2:{    flex:1,    backgroundColor:'#aabbdd'  },  viewItem3Child3:  {    flex:1,    backgroundColor:'#0000ff'  }});AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

Further use of other attributes based on instance 1:

The first View contains three views, which are mainly used to apply the alignSelf attribute;

The second View contains two views. The width of the two views is greater than that of the screen width, which is mainly used for flexWrap attributes;

The third View contains three views, mainly used for flex.

The fourth View contains two views, mainly used for justifyContent and attribute marginTop;

Iii. Other knowledge points:

1: Get the width, height, and resolution of the current screen

Import Dimensions from 'dimensions '; var {width, height, scale} = Dimensions. get ('window'); render () {return (<View> <Text> screen width: {width + '\ n'} screen height: {height + '\ n'} screen resolution: {scale +' \ n'} </Text> </View> );}

2: default width

We all know that if block-level labels do not set width, they usually occupy only one row. In the components of React Native, you need to set flexDirection: 'row' to display the same row, if the width of the flex element is not set, the parent container is fully occupied.

3: center horizontally and vertically

Relationship with flexDirection when alignItems and justifyContent are transmitted to the center:

 

To understand this, it's very easy. Let's take a look at alignItems and justifyContent that I talk about at work. I can understand it by thinking about the spindle and secondary axis. justifyContent is centered in the spindle direction, while alignItems is centered in the secondary axis direction, flexDirection is column by default, so the misunderstanding will consider alignItems as horizontal center, and justifyContent as vertical center.

4: padding and margin

Margin refers to the distance from its border to the border of another container, that is, the outer distance of the container. In CSS, padding refers to the distance between its own border and the border of another container, that is, the distance within the container. The following figure shows CSS, but the names are different (marginTop), and the principles are the same;

5: Style

(1) normal inline style: {}. The first layer {} is an expression, and the second layer {} is a js object;

<View style ={{ fontSize: 40, width: 80 ,}></View>

(2) Call the style sheet: {style class. Attribute}

<View style = {styles. container}> </View>

(3) Coexistence of style sheets and inline styles: {[]}

<View style = {[styles. container, {fontSize: 40, width: 80}]}>

(4) Multiple style sheets: {[Style Class 1, Style Class 2]}

<View style = {[styles. container, styles. color]}>

6: React Native style attribute list

"alignItems","alignSelf","backfaceVisibility","backgroundColor","borderBottomColor","borderBottomLeftRadius","borderBottomRightRadius","borderBottomWidth","borderColor","borderLeftColor","borderLeftWidth","borderRadius","borderRightColor","borderRightWidth","borderStyle","borderTopColor","borderTopLeftRadius","borderTopRightRadius","borderTopWidth","borderWidth","bottom","color","flex","flexDirection","flexWrap","fontFamily","fontSize","fontStyle","fontWeight","height","justifyContent","left","letterSpacing","lineHeight","margin","marginBottom","marginHorizontal","marginLeft","marginRight","marginTop","marginVertical","opacity","overflow","padding","paddingBottom","paddingHorizontal","paddingLeft","paddingRight","paddingTop","paddingVertical","position","resizeMode","right","rotation","scaleX","scaleY","shadowColor","shadowOffset","shadowOpacity","shadowRadius","textAlign","textDecorationColor","textDecorationLine","textDecorationStyle","tintColor","top","transform","transformMatrix","translateX","translateY","width","writingDirection"

Iv. Problem

1: when the following figure appears, it is generally caused by a JS Code error or incorrect style or layout;