2, React native in the Flexbox layout

When it comes to layouts, whether it's Android or iOS or the Web front end, there are layouts in the React native, mostly using flexbox layouts like CSS, but this layout is a little bit different from the Flexbox layout in CSS. The following is a list of the methods used in react native to use the Flexbox layout, mainly related to the following properties:

1. Flex

2, Flexdirection

3, Alignself

4, Alignitems

5, Justifycontent

There are other properties that you can refer to react native Chinese document: http://wiki.jikexueyuan.com/project/react-native/ Flexbox.html, or the documentation for the Flexbox property in CSS: http://www.runoob.com/cssref/css3-pr-align-items.html

Here's one by one. Explain the above properties: Flex Properties The value of Flex property is shaping (greater than 0), and setting the Flex property means that the element is scalable, as in the following code:

Class Test extends Component {
	render () {
		return (
			<view style={styles.container}>
				<view style={styles.child1}>
				</View>
				<view style={styles.child2}>
				</View>
				< View style={styles.child3}>
				</View>
			</View>
		);
	}
}

Const STYLES = {
	container: {
		flex:1, 
		flexdirection: ' column ',//sub-elements are arranged vertically, default is vertically arranged
	},
	child1 : {
		flex:1, 
		backgroundcolor: ' #aa0000 ',
	},
	child2: {
		flex:1, 
		backgroundcolor: ' # Aaaa00 ',
	},
	child3: {
		flex:2, 
		backgroundcolor: ' #0000aa ',
	}
};

In the above code, respectively, Child1, Child2, CHILD3 set the Flex property to 1, 1, 2, representing the three elements in the vertical direction is arranged in the proportion of the 1:1:2, the effect shown on the phone is as follows: from the above code and running effect, Flex properties are particularly like the Layout_weight attribute in Android, which is the scale of the set element Flexdirection PropertyThe Flexdirection property has two values, ' Row ' and ' column ', which represent the arrangement of child elements in an element in a horizontal arrangement (' Row ') or vertically (' column '), without setting the Flexdirection property. By default it is arranged vertically, so in the above figure, we see that three components are arranged vertically, in the above code, we change the Flexdirection property of container in styles to ' row ' and then run it on the phone, as shown in the following figure:

You can prove that flexdirection is set to ' Row ', the child elements are arranged in a horizontal order, and if set to ' column ' or not set, they are arranged vertically Alignself PropertyThe Alignself attribute is more than the value, there are so several: ' auto ', ' flex-start ', ' flex-end ', ' center ', ' Stretch ', below with an example to show the alignself of several worthy differences:

Class Test extends Component {render () {return (<view style={styles.container}> <text style={[styles . Block1, Styles.text]}>alignself: ' Flex-start ' </Text> <text style={[styles.block2, styles.text]}> Alignself: ' flex-end ' </Text> <text style={[styles.block3, styles.text]}>alignself: ' Center ' </text > <text style={[styles.block4, styles.text]}>alignself: ' Auto ' </Text> <text style={[styles.block
	5, Styles.text]}>alignself: ' Stretch ' </Text> </View>); }} Const STYLES = {container: {flex:1,}, Text: {fontsize:13, color: ' #ff0000 ', Margintop:10,}, Bloc
		K1: {width:150, height:40, backgroundcolor: ' #6699ff ', alignself: ' Flex-start ',}, Block2: {width:150, height:40, BackgroundColor: ' #6699ff ', alignself: ' Flex-end ',}, Block3: {width:150, height:40, Backgroun Dcolor: ' #6699ff ', alignself: ' Center ',}, Block4: {width:150, Height: BackgroundColor: ' #6699ff ', alignself: ' Auto ',}, Block5: {height:40, backgroundcolor: ' #6699ff ', Alig Nself: ' Stretch ',}};

The above code works on the phone as follows: As shown in the above example, several properties of alignself represent the position of the element in the container, where: ' Center ' indicates that the element is in the center of the container; ' Flex-start ' means that the element is at the beginning of the container; ' Flex-end ' indicates that the element is at the end of the container; ' Stretch ' indicates that the element will be stretched to fit the container (when the element has no fixed size); ' Auto ' indicates that the element inherits the Alignitems attribute of the parent element, and if no parent element or parent element does not specify the Alignitems attribute, use ' Stretch ' property, in the example above, if you take the style of block4 in styles, remove the Width property and execute the code, you can see that the element is also filled horizontally with the parent element. You can compare the Align-self property in CSS: Http://www.runoob.com/try/playit.php?f=playcss_align-self&preval=center Alignitems PropertySimilar to the Alignself property, the Alignitems property has several properties other than ' auto ', alignitems specifies the default alignment of items within the container, and the Alignitems implementation is overridden with the Alignself property of each item. You can refer to the Align-items property in CSS: Http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=center Justifycontent PropertyThe Justifycontent property has the following values: ' Flex-start ', ' flex-end ', ' center ', ' Space-between ', ' space-around ', can be compared to the properties in the Reference CSS:/http Www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start Note: The Alignitems can be set simultaneously by: ' Center ' and justifycontent: ' Center ' to let the content in the element be horizontally and vertically centered, below an example to show the effect of Justifycontent:

Class Test extends Component {
	render () {
		return (
			<view style={styles.container}>
				<text Style={[styles.block, styles.text]}></text>
				<text Style={[styles.block, styles.text]}></ Text>
				<text style={[styles.block, styles.text]}></text>
				<text Style={[styles.block, Styles.text]}></text>
				<text style={[styles.block, styles.text]}></text>
			</View >
		);
	}
}

Const STYLES = {
	container: {
		flex:1,
		justifycontent: ' Flex-start ',
	},
	text: {
		Fontsize:13,
		color: ' #ff0000 ',
		margintop:10,
	},
	block: {
		width:150,
		height:40,
		backgroundcolor: ' #6699ff ',
	}
};

The above code on the mobile phone operation effect as shown below:
If you change the justifycontent in container to Flex-end, the effect is as follows:

If you change the justifycontent in container to center, the effect is as follows:


If you change the justifycontent in container to center and add alignitems: ' center ', the effect is as follows:


From the above code and renderings can be compared: Alignitems mainly set the container elements in the horizontal direction of the layout, justifycontent mainly set the elements in the container in the vertical direction of the layout (personal understanding, if not, please correct me ...) ）