React Native - 通过onLayout回调获取根View的宽高(对比Dimensions API)
作者:hangge | 2017-09-01 08:10
1,如何检测设备当前的放置状态
有时我们需要检测设备当前是竖置的还是横置的,比较常用的方法就是取得当前设备屏幕的宽高。
- 正常的设备在竖置时,宽小于高。
- 在横置时,宽大于高。
2,Dimensions API 介绍
我们使用 Dimensions API 可以得到手机屏幕的宽和高。
- 当设备横置时,通过 Dimensions API 取到的宽大于高。
- 当设备竖置时,通过 Dimensions API 取到的宽小于高。
3,onLayout 回调函数介绍
(1)React Native 开发的应用可以有一个或者多个根 View(没有父组件)。
(2)在不指定根 View 的宽高(并将其 flex 样式设为 1)的情况下,通过指定这个根 View 组件的回调函数可以很方便地得到设备的放置状态。
- 当设备横置时,通过 onLayout 回调取到的根 View 宽大于高。
- 当设备竖置时,通过 onLayout 回调取到的根 View 宽小于高。
(3)同时 onLayout 回调函数还可以用来监测设备放置状态的改变,并得到改变后的新的屏幕高度和宽度。
4,使用样例
(1)我们给根 View 加上 onLayout 回调函数,在回调中打印出其宽高。同时还通过 Dimensions API 获取屏幕宽高,并打印做比较。
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Dimensions, View, Text, } from 'react-native'; class Main extends Component { //根View的onLayout回调函数 _onLayout(event) { //使用大括号是为了限制let结构赋值得到的变量的作用域,因为接来下还要结构解构赋值一次 { //获取根View的宽高,以及左上角的坐标值 let {x, y, width, height} = event.nativeEvent.layout; console.log('通过onLayout得到的宽度:' + width); console.log('通过onLayout得到的高度:' + height); } //通过Dimensions API获取屏幕宽高 let {width, height} = Dimensions.get('window'); console.log('通过Dimensions得到的宽度:' + width); console.log('通过Dimensions得到的高度:' + height); } render() { return ( <View style={styles.flex} onLayout={this._onLayout}> </View> ); } } const styles = StyleSheet.create({ flex:{ flex:1, //将更View的flex样式设为1,且不指定根View的宽和高。 alignItems: 'center' }, }); AppRegistry.registerComponent('HelloWorld', () => Main);
(2)当手机竖屏时,控制台输出如下:
(3)当手机切换到横屏,控制台输出如下:
全部评论(0)