React Native中的postion定位
在React Native中,flexbox定位和position定位可以同时使用,
同时生效(关于flexbox定位的相关知识请自行查阅资料,这里不再赘述)。
position有两个取值:relative(默认值)和absolute。
以元素本来的位置为基准进行偏移。
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TextInput,
} from 'react-native';
export default class Test extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.p1}/>
<View style={styles.p2}/>
<View style={styles.p3}/>
<View style={styles.p4}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
backgroundColor: '#33ffff',
},
p1: {
width: 50,
height: 50,
backgroundColor: 'red',
},
p2: {
width: 50,
height: 50,
backgroundColor: 'yellow',
},
p3: {
width: 50,
height: 50,
backgroundColor: 'blue',
},
p4: {
width: 50,
height: 50,
backgroundColor: '#666',
position: 'relative',
left: 50,
top: 50,
},
});
以父元素的边框为基准进行偏移。
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TextInput,
} from 'react-native';
export default class Test extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.p1}/>
<View style={styles.p2}/>
<View style={styles.p3}/>
<View style={styles.p4}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#33ffff',
},
p1: {
width: 50,
height: 50,
backgroundColor: 'red',
position: 'absolute',
left: 50,
top: 50,
},
p2: {
width: 50,
height: 50,
backgroundColor: 'yellow',
position: 'absolute',
right: 50,
bottom: 50,
},
p3: {
width: 50,
height: 50,
backgroundColor: 'blue',
position: 'absolute',
bottom: 50,
},
p4: {
width: 50,
height: 50,
backgroundColor: '#666',
position: 'absolute',
bottom: 50,
alignSelf: 'center',
},
});