3.1 Flexbox

1.Flexbox layout

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

2.flex:1

1. const styles = StyleSheet.create({
2. container: {
3. flex: 1
4. },
5. header: {
6. height: 200,
7. backgroundColor: 'red'
8. },
9. main: {
10. flex: 1,
11. backgroundColor: 'blue'
12. },
13. footer: {
14. height: 200,
15. backgroundColor: 'green'
16. },
17. text: {
18. color: '#ffffff',
19. fontSize: 80
20. }
21. });

3.flexDirection:'row'|'column'

4.justifyContent:'flex-start'|'flex-end'|'center'|'space-between'|'space-around'

5.alignItems:'flex-start'|'flex-end'|'center'|'stretch'

6.alignSelf:'auto'|'flex-start'|'flex-end'|'center'|'stretch'

7.flexWrap:'wrap'|'nowrap'

8.Box model

width = borderLeftWidth(25)+paddingLeft(25)+100+borderRightWidth(25)+paddingRight(25)=200

height = borderTopWidth(25)+paddingTop(25)+100+borderBottomWidth(25)+paddingBottom(25)=200

1. class Main extends Component {
2. render() {
3. return (
4. <View style={styles.container}>
5. <View style={styles.header}>
6. <Text style={styles.text}>200X100</Text>
7. </View>
8. <View style={styles.main}>
9. <View  style={styles.mainContent}>
10. <Text style={styles.text}>100X100</Text>
11. </View>
12. </View>
13. <View style={styles.footer}>
14. <Text style={styles.text}>200X100</Text>
15. </View>
16. </View>
17. );
18. }
19. }

21. const styles = StyleSheet.create({
22. container: {
23. flex: 1,
24. justifyContent: 'center',
25. alignItems: 'center'
26. },
27. header: {
28. height: 100,
29. width: 200,
30. backgroundColor: 'red'
31. },
32. main: {
33. height: 200,
34. width: 200,
35. padding: 25,
36. borderWidth: 25,
37. borderColor: 'black',
38. margin: 25,
39. backgroundColor: 'blue'
40. },
41. mainContent: {
42. flex: 1,
43. justifyContent: 'center',
44. alignItems: 'center',
45. backgroundColor: 'red'
46. },
47. footer: {
48. height: 100,
49. width: 200,
50. backgroundColor: 'green'
51. },
52. text: {
53. color: '#ffffff',
54. fontSize: 20
55. }
56. });

原文: <https://unbug.gitbooks.io/react-native-training/content/31_flexbox.html>