React-native Layout

React-native Layout

Width unit and pixel density

The react width does not support percentages. When setting the width, the unit {width: 10} is not required. What is the specific width of 10?

I don't know whether the documents on the official website are incomplete or I am blind, but I still cannot find them. I 'd like to find an experiment myself:

The default result of the iPhone 6 simulator is:

We know the size of the iPhone series is as follows:

We can see that the iphone 6 is 375pt in width, corresponding to the top 375. This shows that the react unit is pt. How can we get the actual pixel size? This is very important for image cleansing. If the size of my image is 100*100 px and the width is set to 100*100, the size on the iphone will be blurred. In this case, the image size should be 100 * pixelRatio.

React provides obtaining PixelRatio

　　Flex Layout

　　Default width

We know that if the width of a div is not set, the 100% width will be occupied by default. To verify the 100% width, we will do three experiments.

A View at the top of the root node without setting the width

Set a View on a fixed-width element without setting the width.

Put a View width on the flex element without setting the width.

The result shows that if the width of the flex element is not set, the parent container is fully occupied.

　　Center horizontally and vertically

In css, one common task is to center a text or image horizontally and vertically. If flexbox that has used css, of course, knows that alignItems and justifyContent are used, react-native will also be used for the experiment.

　　Grid layout

Grid layout experiment, grid layout can meet the majority of daily development needs, so as long as the grid layout spec is met, it can prove that the react flex layout can meet normal development needs

　　Equals Grid

　　Left fixed, right fixed, intermediate flex Layout

　　Nested Grid

Usually, the grid is not a layer, and the layout container is a layer-by-layer layout. Therefore, the grid layout under real world must be verified.

Fortunately, the nested relationship I can see is complex enough without being played badly. (I added a ScrollView and then nested the entire structure) there is no problem with the layout of nested layers.

　　Image Layout

First, we need to know that the Image has a stretchMode. Access through Image. resizeMode

　　Find out which modes are available

　　Try to use these modes

100 PX height, you can see that the image adapts to the height and full screen width, and the background center adapts to not stretching but is truncated, that is, cover.

The container in the contain mode can fully accommodate images and adaptive width and height of images.

The cover mode is the same as the 100px height mode.

Stretch mode image stretched to fit the screen

I tried it and found that the height is set to the parent container. The image flex is equivalent to the cover mode.

　　Absolute and relative positioning

Unlike the css standard, element containers do not need to set position: 'absolute | relative '.

Relatively positioning, we can see that it is easy to work with margin. (I also worried that I could not work with margin, so I tested it :-:)

　　Padding and margin

We know that the inline and block elements are differentiated in css, since react-native implements a super small css subset. Then let's test the usage of padding and margin on inline and non-inline elements.

　　Padding

Setting the padding on the View is smooth and there is no problem. However, if you set the padding on the inline element, the above error will occur. The paddingTop and paddingBottom are both congested into marginBottom. It is reasonable to say that we should not perform padding on Text, but such a problem exists, so we can mark it.

　　Margin

We know that for inline elements, setting margin-left and margin-right is valid, and top and bottom are not valid, but the results show that they actually take effect. So now I feel that the Text element should be understood as a block that cannot be configured with padding.

Forget it. Let's take a look at what Text says in the official document.

That is, if the Text element is in Text, it can be considered as inline. If it is in View alone, it is Block.

Next we will focus on text-related la S.

　　Text Element

First, we need to consider what functions we want for Text elements or want to verify:

Can text be automatically wrapped?

Overflow ellipse?

Whether to set styles for some text, such as labels such as span

　　First, let's take a look at the style attributes supported by the text.

　　Lab 1, 2, 3

From the results, 1, 2, 3 are verified. But I don't know if you have found any problems. Why is there so much space at the bottom and no height is set. I removed the numberOfLines = {5} line of code. The effect is as follows:

So in fact, the space is opened by text, but the text is intercepted by numberOfLines = {5}, but the remaining space is still there. I guess this is a bug.

In fact, the official document places numberOfLines = {5} on the Text element of long Text, that is, the subtext. The actual result is invalid. This should be another bug.

What is the specific implementation of the sub-Text element of the Text element? I feel that there will be many bugs in this product.

Behind the scenes, this is going to be converted to a flat

NSAttributedString that contains the following information

Well, the bug that numberOfLines = {5} is placed on the sub-Text element can be explained.

　　Style inheritance of Text

In fact, there is no style inheritance in React-native, but for the Text element in the Text element, the above example shows that there is inheritance. Now that there is inheritance, the problem is coming!

Does it inherit the value of the outermost Text or the value of the father Text?

The result shows that the father Text is directly inherited.

　　Summary

The react width is based on pt. You can use Dimensions to obtain the width and height and PixelRatio to obtain the density. If you want to use the percentage, You can manually calculate it by obtaining the screen width.

Flex-based layout

The default view width is 100%.

AlignItems for horizontal center and justifyContent for vertical center

Based on flex, the existing grid system requirements can be met, and the grid can be nested without any bugs.

Image Layout

Image. resizeMode is used to adapt to the Image layout, including contain, cover, and stretch.

The default mode is "cover ".

The contain mode is adaptive to width and height, and the height value can be given.

Cover is full of containers, but it is intercepted.

Stretch is filled with containers and stretched

Positioning

Positions are not set to the parent element.

When padding is set on the Text element, a bug exists. All padding changes to marginBottom.

Text Element

The Text must be placed in the Text element.

Text elements can be nested with each other and have style inheritance relationships.

NumberOfLines needs to be placed on the Text element of the outermost layer. Although the Text is intercepted, it still occupies space.