Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to use Flexbox layout in React. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

A unit of length

Before starting any layout, let's first need to know that when writing the React Native component style, the length is undivided, which represents "logical pixels independent of the device pixel density."

How do you understand this?

We know that a glowing minimum point on the screen corresponds to a pixel (pixel) point.

Suppose the following three rectangles represent three devices with the same screen size, but they have different resolutions (resolution):

Figure 1. Different resolutions for devices of the same size

Each small grid on the picture actually represents a pixel. As you can see, the size of a pixel is different on these three devices with the same physical size but different resolutions.

If we set the size of an interface element in pixels, such as the height of the 2px, then the device above the length of the 2px will look like this:

Figure 2. Actual height of 2px at different resolutions

They really show different lengths.

We want a unit of length that represents the same physical size on a screen of the same physical size (no matter who has the higher or lower resolution, as long as the physical size is the same). This unit should be independent of the resolution, and it should be called density-independent pixels, or dp for short. This is actually the unit of length used in the Android system.

For example, content with wide 2dp and high 2dp has the same physical size on devices with different resolutions but the same screen size. (a digression: some Android developers suggest that all clickable buttons should be no less than 48dp in width and height. )

Figure 3. 2dp * 2dp size content occupies the same physical size in a screen of the same size

Font size in Android uses another unit, called scale independent pixels, or sp for short. This unit is similar to dp, but it is usually used in setting font size. The font set by it can be changed according to the font size of the system.

There is a formula for pixel and dp: px = dp * (dpi/160).

Dpi stands for dot per inch, which is the pixel per inch, and it also has its own formula, which is not expanded here. We just need to know that the reason we want to use a unit independent of the device resolution is to make the application look consistent in devices with different resolutions.

In RN, there is also a unit of length similar to dp. If we want to know how many units our screen is measured in this length, we can get it by introducing the Dimensions in the react-native package, and we can also see what the pixel ratio of the machine is.

Import {Text, View, Dimensions, PixelRatio} from 'react-native';const {height, width} = Dimensions.get (' window'); const pxRatio = PixelRatio.get (); {`width: ${width}, height: ${height} `} {`pixel radio: ${pxRatio}`}

The display is as follows:

Figure 4. The screen information of the current mobile phone

It reflects that the width of the current mobile phone screen occupies 360 units and the height occupies 640 units. The pixel ratio is 3, which is actually a 1080-by-1920-pixel phone. Where 1080 = width * pixelRadio, 1920 = height * pixelRatio

II. Flexbox layout

Flexbox layout, that is, elastic box model layout. Friends with Android development experience may still remember layout methods such as LinearLayout,RelativeLayout,FrameLayout, but for Web developers who know more about CSS, using flexbox layout will certainly make him feel a more convenient development experience.

The flexbox layout in RN actually comes from the flexbox (Elastic Box) layout specification in CSS. In fact, it is still in the Last Call Working Draft stage in CSS, but it is well supported by mainstream browsers. In RN, the layout semantics are almost completely borrowed, and there is no worry of browser compatibility, so it is very convenient to use. RN only uses camelCase instead of hyphens to write the attributes of CSS. As you'll see later, the default flex direction is also different.

To understand the layout of the elastic box model, you must first know the four most basic concepts: Flex Container (container), Flex Item (item), Flex Direction (direction), and Axis (axis).

1.Flex Container

It is the container that wraps the content, and its display needs to be set to 'flex' (or' inline-flex').

The following six properties are set on the container.

AlignItems specifies the alignment of the item on the side axis

AlignContent specifies the alignment of item on multiple axes

FlexDirection specifies the spindle direction

FlexWrap specifies how the item wraps in the spindle direction

Abbreviated forms of flexFlow flexDirection property and flexWrap property

JustifyContent specifies how item is distributed on the spindle

2.Flex Item

A container is an element that is wrapped directly. The so-called elastic box layout, usually want to layout things is them.

The following six properties are set on the project.

AlignSelf each item can be set separately to override the alignItems set by Flex Container.

Order specifies that the smaller the item order, the higher the number.

FlexGrow specifies the stretch scale of the item

FlexShrink specifies the compression ratio of the item

FlexBasis specifies the size of the spindle that item occupies before allocating excess space

Flex is actually an abbreviation for flexGrow flexShrink flexBasis.

3.Flex Direction and Axis

In the elastic box, items are arranged along the main axis (principal axis) by default, and the axis perpendicular to the principal axis is called cross axis, or side axis, or cross axis.

In the box, the items are arranged in four directions: horizontal pros and cons and vertical pros and cons.

Structure code:

1 2 3 1 2 3 1 2 3 1 2 3

Style Code:

Row: {backgroundColor:'# ffe289',flexDirection: 'row'}, rowReverse: {flexDirection:' row-reverse'}, column: {backgroundColor:'# ffe289',flexDirection: 'column'}, columnReverse: {flexDirection:' column-reverse'}

Figure 5. FlexDirection

As there are plenty of resources about flex layout explanation on the Internet, readers can refer to the link given at the end, or search the Internet on their own. CSS and RN are interlinked.

Here is mainly to share two small points that individuals feel easy to cause confusion in the process of learning.

First of all, the two attributes, justify-content and align-content, may be easier to misunderstand the direction in which they work.

Where justify-content sets how the items is distributed along the principal axis. Align-content sets how the items is aligned along the side axis.

Taking the previous example, by default, the direction of flex is column (unlike mobile and web pages, where flex layout is set with CSS on web pages, the default fiex-direction is row, that is, horizontally from left to right).

On the mobile side, the spindle defaults to the vertical direction, from top to bottom. Let's set its height a little higher and put three item in it:

Structure code:

1 2 3

Style Code:

DefaultFlex: {height: 300 ffe289',display:'# flex'}

Figure 6. Default flex

Justify-content sets how items is distributed along the principal axis, for example, if we add justifyContent: 'space-between'

DefaultFlex: {height: 300 ffe289',display:'# flex',justifyContent: 'space-between'}

The items is separated along the principal axis.

Figure 7. JustifyContent: 'space-between'

If we set alignItems: 'center', the project is centered along the side axis (in this case, the horizontal axis). Note that both attributes can work at the same time.

Figure 8. JustifyContent: 'space-between' and alignItems:' center'

Then, it is worth pointing out that the flex attribute is actually a combination of flexGrow, flexShrink, flexBasis (the corresponding CSS attributes flex-grow, flex-shrink, and flex-basis).

The setting of flex:1, which we usually see on mobile, is actually the setting of flex-grow. The default value for the latter is 0. Using the method of setting flex-grow to a positive integer, you can have item distributed proportionally, or fill the remaining box space when other item is fixed, as if it were elastic.

Structure code:

Style Code:

Container: {flex: 1}, flex1: {/ / height: 99 orange',: 1 flexGrow: 'orange',}, flex2: {flexGrow: 2 lightblue',}, flex3: {flexGrow: 3 green',}

Figure 9. Proportional distribution

It is important to note that if the size of the parent container is zero (that is, no width or height is set, or flex is not set), even if the child component uses flex, it cannot be displayed.

So the outermost one here uses the flex layout, flex:1, which means that it takes up the whole vertical space.

III. Small actual combat drills

Let's simply use the flex layout and slightly adjust the previous example to achieve a layout with a head, a fixed height at the bottom, and a middle content that fills the rest of the screen:

First, adjust the structure:

Adjust the style:

Container: {flex: 1}, header: {height: 60 orange',}, body: {flexGrow: 1 lightblue',}, footer: {height: 60 green',}

Figure 10. A layout with a head and tail

The second part is to add a title to header.

We divide the head into three parts, simulate a back button on the left, display the title text in the middle, and simulate a small fork on the right:

Return this is a title ×

You need to set the flexDirection of header to horizontal:

Header: {height: 60 white',textAlign: 'row',alignItems:' center'}, back: {color: 'white',marginLeft: 15}, title: {flexGrow: 1 white',textAlign: 20 center'}, exit: {marginRight: 20 white',textAlign:' white'}

Figure 11. Header has a title

In the third step, we can divide the footer into three equal parts and simulate the menu:

Add, delete, modify

Add a style:

Footer: {height: 60 row',alignItems: 'row',alignItems:' center'}, menu: {flexGrow: 1 center',color: 'white'}, menu: {flexGrow: 1 center',color:' white'}

Figure 12. Footer tripartite simulation menu

Finally, let's also fill in a few input boxes with buttons in body.

Introduce TextInput and Button components, and then put them into body in three groups

{}} title= "OK" > {}} title= "very sure" > {}} title= "certain and sure" >

Add a style:

Body: {flexGrow: 1 minWidth color: 'lightblue',}, inputRow: {flexDirection:' row',alignItems: 'center',marginLeft: 10 Magi Edge right: 10}, textInput: {flex: 1}, btn: {minWidth: 60} these are all the contents of this article entitled "how to use Flexbox layout in React". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.