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