返回 导航

React / React Native

hangge.com

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)

回到顶部