I haven't written a blog for a long time. I have been recording some problems with my impression notes. In 2017, I want to write my blog again. Also hope to make some friends through this platform.
There is no specific introduction to the basic grammar, mainly to illustrate some differences with the standard CSS Flex and a practical example. If you want to learn Flex layout well, you should write more Demo s.
Basic introduction
Flex (Flex) layout is a common way of layout for web pages, and now there are some attempts on the mobile side.( Android-side Flex layout ) The basic layout of React Native is the Flex layout.
Basic concepts
main aixs, representing a major axis, will be deployed in the direction of the main axis. For example, the direction of the spindle is'row', meaning it will be laid out horizontally.
cross aixs, another axis perpendicular to main aixs. The alignment on this axis can be controlled.
Command mode: hump type. Right: flex Direction. Error: flex-direction. The dimensions in React Native are independent pixels independent of density.
Group attribute
This term (Android) is not very accurate. It means that something can be put in a box. The Group attribute is the attribute that defines the box.
- Flexible Direction ('row','row-reverse','column','column-reverse'): The direction of the spindle is like the order in which things are placed in a box, such as'row'. After putting the first thing, the second one needs to be on the same line as the first one.
- JustifyContent ('flex-start','flex-end','center','space-between','space-around'): The alignment of the spindle, for example, when the direction of the spindle is'row', justifyContent can change the arrangement of things in the box, for example,'flex-end' means that things in the box are arranged at the end of a row.
- flexWrap('wrap','nowrap'): Line change when the spindle position exceeds the accommodation area. For example, when the spindle direction is'row', one line can't fit, and setting'wrap'will change to the next line.
- AlignItems ('flex-start','flex-end','center','stretch'): The alignment of cross-axes, for example, when the direction of the main axis is'row', is arranged according to'columen', which is the property of controlling the alignment of cross-axes. For example,'center'will be displayed in the middle of the vertical direction.
Looking at the content of Flex layout in CSS, React Native is relatively simplified, and flex-flow and align-content are not in React Native.
Child attribute
The same term (Android) is not very accurate. It means that something can be put in a box. The Child attribute is the attribute that defines what is put in a box.
- flex(number): Unlike CSS standards, flex in React Native can only be a number. If it is a positive integer, it is proportional to the size of the number. If it's 0, it's self-generated and can't be expanded. If it is - 1, it will show the size of self-generated, and it will shrink to minWidth/minHeight when space is insufficient.
- flexGrow(number): Defines the zoom-in property of a child, and when there is still space available, the larger the number, the larger the proportion.
- flexShrink(number): Defines the reduced attribute of child, which is set when the child display exceeds space, similar to the flexGrow user.
- FlexBasis (number): When flexDirection is row, it is used to set the width attribute. When flexDirection is column, it is used to set the width attribute.
- AlignSelf ('auto','flex-start','flex-end','center','stretch'): You can override the alignItems attribute and'stretch'works only when you don't set the specific width/height.
Compared with the standard of CSS, without order attribute and flex attribute, the meaning is different.
Other attributes
- aspectRatio(number): Used to represent aspect ratio, React Native is unique. It's a good property, for example, knowing the proportion of pictures displayed, the width is the screen width, so you don't need to calculate the width and then calculate the height, just set it up.
- Position ('absolute','relative'): stands for location information and defaults to'relative'. If'absolute'is set, it represents an absolute position, and then you can use another attribute (left, right, etc.) to fix it somewhere on the screen.
- Overflow ('visible','hidden','scroll'): The style displayed when a child overflows its Group.
- zIndex(number): The larger numbers are shown above. Some special uses may be used. The following code text1 is shown on text2.
text1: { fontSize: 14, backgroundColor: '#0f0', marginLeft: 20, height: 25, position: 'absolute', zIndex: 3, // Shown on text2 }, text2: { fontSize: 14, backgroundColor: '#f00', left: 10, borderWidth: 20, position: 'absolute', zIndex: 2, },
- Others: margin, padding, border, left, top, right, bottom, maxWidth, maxHeight, minWidth, minHeight and the derivatives of margin Left, margin Right and so on. Look at the picture below.
Some conceptual distinctions in layout
actual combat
Refer to the movie introductions in PPTV Focus Video to implement with React Native.
Actual combat reference
Write the code directly.
import React, from 'react'; import { StyleSheet, Image, Button, Text, View, } from 'react-native'; export default class MovieInfo extends Component{ _onPress(){ } render(){ return( <View style=> {/* The whole is a'column'style, then the introduction in the middle is a'row' style, and the right side of the picture is another one. 'column'Styled, each line is distinguished by the'row'style. */} <Text style=>brief introduction</Text> <View style=> <Image style= source={{uri:"http://pic4.qiyipic.com/image/20161222/d2/59/a_100039885_m_601_180_236.jpg"}}></Image> <View style=> <View style=> <Text style=>Director:</Text> <Text style=>Monkey D Luffy</Text> </View> <View style=> <Text style=>Starring: Takeshi Yamashita,Changze Yamei, Xinyuan Clothes</Text> <Text style=></Text> </View> <View style=> <Text style=>Type: Daylight, Hot Blood</Text> <Text style=></Text> </View> <View style=> <Text style=>Region: Japan</Text> <Text style=></Text> </View> <View style=> <Text style=>Years: 1999</Text> <Text style=></Text> </View> <View style=> <View style=> <Text style=>Score:</Text> <Text style=>9.1</Text> </View> <Button onPress= style= color='#ff9313' title="I want to score." accessibilityLabel="Learn more about purple"></Button> </View> </View> </View> <Text style=>There is a man who has all the wealth, fame and power in the world. He is「Pirate king」High road•Roger. Before dying, I said this sentence: Let the whole world run to the sea. 「Want my treasure? If you want it, take it all. Go and find it! I put everything in the world there.」. Later, people in the world called the treasure "a great secret". One Piece)，Many people compete for great treasures One Piece，Countless pirates raised their flags and fought against each other, and then came into being.「The Age of Great Piracy」. Protagonist Monch•D•Lufei is looking for like-minded partners on the distant road to work together「Great route」，Target should be「Pirate king」. </Text> </View> ); } } const styles = StyleSheet.create({ container:{ flexDirection: 'column', justifyContent: 'flex-start', backgroundColor: '#fafafa', }, brifeText:{ fontSize: 15, margin: 12, color: '#323232', }, moviewBrifeContainer:{ flexDirection: 'row', justifyContent: 'flex-start', marginLeft: 12, marginRight: 12, marginTop: 4, }, movieImage:{ width: 100, aspectRatio: 0.758, }, movieInfo:{ flexDirection: 'column', justifyContent: 'flex-start', flex: 1, marginLeft: 12, }, movieDetail:{ flexDirection: 'column', justifyContent: 'flex-start', marginLeft: 12, }, movieDirector:{ flexDirection: 'row', justifyContent: 'flex-start', }, movieDirectorTitle:{ fontSize: 11, color: '#646464', }, movieDirectorText:{ fontSize: 11, color: '#646464', }, movieActor:{ flexDirection: 'row', justifyContent: 'flex-start', marginTop: 5, }, movieActorTitle:{ fontSize: 11, color: '#646464', }, movieActorText:{ fontSize: 11, color: '#646464', }, movieType:{ flexDirection: 'row', justifyContent: 'flex-start', marginTop: 5, }, movieTypeTitle:{ fontSize: 11, color: '#646464', }, movieTypeText:{ fontSize: 11, color: '#646464', }, movieArea:{ flexDirection: 'row', justifyContent: 'flex-start', marginTop: 5, }, movieAreaTitle:{ fontSize: 11, color: '#646464', }, movieAreaText:{ fontSize: 11, color: '#646464', }, movieYear:{ flexDirection: 'row', justifyContent: 'flex-start', marginTop: 5, }, movieYearTitle:{ fontSize: 11, color: '#646464', }, movieYearText:{ fontSize: 11, color: '#646464', }, movieSource:{ flexDirection: 'row', justifyContent: 'space-between', flexGrow: 1, }, movieSource2:{ flexDirection: 'row', alignItems: 'flex-start', marginTop: 5, }, movieSourceTitle:{ fontSize: 11, color: '#646464', }, movieSourceText:{ fontSize: 11, color: '#646464', }, movieSourceButton:{ fontSize: 13, color: '#fff', }, detailText:{ fontSize: 11, marginLeft: 12, marginRight: 12, marginTop: 16, marginBottom: 16, color: '#646464', }, });
problem
- Can you display any UI? At present, what I think and what I write are in line with each other, and I have to continue to write.
- Is flex layout better than other layouts? It shows only one layer. If you use Relative Layout, Linear Layout, you may have more layers.
Display style
Layout analysis
summary
I also went to study the grammar related to React, but first learned the layout, not that grammar is not very important, but grammar learning or should be put into practice, of course, layout also needs more writing to better understand. Maybe it's more effective to have a general understanding before learning the details.