3.2 Absolute & Relative

1.absolute

3.2 Absolute & Relative - 图1

  1. class Position extends Component {
  2.   render() {
  3.     return (
  4.       <View style={styles.container}>
  5.         <View style={styles.box1}>
  6.           <Text style={styles.text}>1</Text>
  7.         </View>
  8.         <View style={styles.box2}>
  9.           <Text style={styles.text}>2</Text>
  10.         </View>
  11.         <View style={styles.box3}>
  12.           <Text style={styles.text}>3</Text>
  13.         </View>
  14.       </View>
  15.     );
  16.   }
  17. }
  18. const styles = StyleSheet.create({
  19.   container: {
  20.     flex: 1
  21.   },
  22.   box1: {
  23.     position: 'absolute',
  24.     top: 40,
  25.     left: 40,
  26.     width: 100,
  27.     height: 100,
  28.     backgroundColor: 'red'
  29.   },
  30.   box2: {
  31.     position: 'absolute',
  32.     top: 80,
  33.     left: 80,
  34.     width: 100,
  35.     height: 100,
  36.     backgroundColor: 'blue'
  37.   },
  38.   box3: {
  39.     position: 'absolute',
  40.     top: 120,
  41.     left: 120,
  42.     width: 100,
  43.     height: 100,
  44.     backgroundColor: 'green'
  45.   },
  46.   text: {
  47.     color: '#ffffff',
  48.     fontSize: 80
  49.   }
  50. });

2.zIndex, v0.29 or transform

3.2 Absolute & Relative - 图2

  1.   box2: {
  2.     position: 'absolute',
  3.     top: 80,
  4.     left: 80,
  5.     width: 100,
  6.     height: 100,
  7.     backgroundColor: 'blue',
  8.     transform: [{'translate': [0,0, 1]}]
  9.   },

3.relative(default)

3.2 Absolute & Relative - 图3

  1. class Relative extends Component {
  2.   render() {
  3.     return (
  4.       <View style={styles.container}>
  5.         <View style={styles.box1}>
  6.           <Text style={styles.text}>1</Text>
  7.           <View style={styles.ball}/>
  8.         </View>
  9.         <View style={styles.box2}>
  10.           <Text style={styles.text}>2</Text>
  11.         </View>
  12.       </View>
  13.     );
  14.   }
  15. }
  16. const styles = StyleSheet.create({
  17.   container: {
  18.     flex: 1
  19.   },
  20.   box1: {
  21.     position: 'relative',
  22.     top: 40,
  23.     left: 40,
  24.     width: 100,
  25.     height: 100,
  26.     backgroundColor: 'red'
  27.   },
  28.   box2: {
  29.     position: 'absolute',
  30.     top: 100,
  31.     left: 100,
  32.     width: 100,
  33.     height: 100,
  34.     backgroundColor: 'blue'
  35.   },
  36.   ball: {
  37.     position: 'absolute',
  38.     top: 40,
  39.     left: 40,
  40.     width: 40,
  41.     height: 40,
  42.     borderRadius: 20,
  43.     backgroundColor: 'yellow'
  44.   },
  45.   text: {
  46.     color: '#ffffff',
  47.     fontSize: 80
  48.   }
  49. });

4.fixed

3.2 Absolute & Relative - 图4

  2. class Fixed extends Component {
  3.   render() {
  4.     return (
  5.       <View style={styles.container}>
  6.         <View style={styles.tbar}>
  7.           <Text style={styles.text}>Fixed top bar</Text>
  8.         </View>
  9.         <ScrollView style={styles.main}>
  10.           <View style={styles.item}><Text style={styles.text}>1</Text></View>
  11.           <View style={styles.item}><Text style={styles.text}>2</Text></View>
  12.           <View style={styles.item}><Text style={styles.text}>3</Text></View>
  13.         </ScrollView>
  14.         <View style={styles.bbar}>
  15.           <Text style={styles.text}>Fixed bottom bar</Text>
  16.         </View>
  17.       </View>
  18.     );
  19.   }
  20. }
  21. const styles = StyleSheet.create({
  22.   container: {
  23.     flex: 1
  24.   },
  25.   tbar: {
  26.     width: 375,
  27.     height: 100,
  28.     borderBottomWidth: 5,
  29.     borderColor: 'black',
  30.     backgroundColor: 'red'
  31.   },
  32.   main: {
  33.     flex: 1
  34.   },
  35.   item: {
  36.     height: 200,
  37.     width: 375,
  38.     marginTop: 10,
  39.     backgroundColor: 'green'
  40.   },
  41.   bbar: {
  42.     width: 375,
  43.     height: 100,
  44.     borderTopWidth: 5,
  45.     borderColor: 'black',
  46.     backgroundColor: 'red'
  47.   },
  48.   text: {
  49.     color: '#ffffff',
  50.     fontSize: 40
  51.   }
  52. });

原文: https://unbug.gitbooks.io/react-native-training/content/32absolute&_relative.html