获取主屏幕尺寸
为了后面更好的展示案例，我们先来看看如何获取主屏幕的尺寸和分辨率
首先，我们需要先导入 Dimensions 库
// 导入类库 var Dimensions = require('Dimensions');
接下来就可以在需要的地方使用 Dimensions 变量获取屏幕的高度、宽度、分辨率等等数据
export default class TestRN extends Component {
render() {
return (
<View style={styles.container}>
<Text>当前屏幕的宽度:{Dimensions.get('window').width}</Text>
<Text>当前屏幕的高度:{Dimensions.get('window').height}</Text>
</View>
);
}
}
设置样式 // 样式 const styles = StyleSheet.create({ container: { backgroundColor:'blue' }, });
效果：
既然能拿到屏幕的尺寸，那么就能够直接将主 View 的大小设置成屏幕的尺寸，使 View 填充整个屏幕
// 样式
const styles = StyleSheet.create({
container: {
backgroundColor:'blue',
height:Dimensions.get('window').height,
width:Dimensions.get('window').width
},
});
效果：
FlexBox 常用容器属性
为了方便理解，我们先添加几个视图
// 导入类库
var Dimensions = require('Dimensions');
// 入口
export default class TestRN extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.subViewStyle1}></View>
<View style={styles.subViewStyle2}></View>
<View style={styles.subViewStyle3}></View>
</View>
);
}
}
// 样式
const styles = StyleSheet.create({
container: {
backgroundColor:'blue',
height:Dimensions.get('window').height,
width:Dimensions.get('window').width
},
subViewStyle1: {
backgroundColor:'red',
height:60,
width:60,
},
subViewStyle2: {
backgroundColor:'yellow',
height:60,
width:60,
},
subViewStyle3: {
backgroundColor:'green',
height:60,
width:60,
},
});
效果：
