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.

3.1 Flexbox - 图1

2.flex:1

3.1 Flexbox - 图2

  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'

3.1 Flexbox - 图3

3.1 Flexbox - 图4

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

3.1 Flexbox - 图5

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

3.1 Flexbox - 图6

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

3.1 Flexbox - 图7

7.flexWrap:'wrap'|'nowrap'

3.1 Flexbox - 图8

8.Box model

3.1 Flexbox - 图9

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. });

3.1 Flexbox - 图10

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