返回 导航

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）

回到顶部