React Native 其他组件之 Dimensions

本模块用于获取设备屏幕的宽高。

方法

• set()
  这个函数只应该被原生代码调用。

get()
初始的尺寸信息应该在runApplication之后被执行，这样才可以在任何其他的 require 被执行之前使用。

Dimensions API 介绍

我们使用 Dimensions API 可以得到手机屏幕的宽和高。

• 当设备横置时，通过 Dimensions API 取到的宽大于高。
• 当设备竖置时，通过 Dimensions API 取到的宽小于高。

onLayout 回调函数介绍

（1）React Native 开发的应用可以有一个或者多个根 View（没有父组件）。

（2）在不指定根 View 的宽高（并将其 flex 样式设为 1）的情况下，通过指定这个根 View 组件的回调函数可以很方便地得到设备的放置状态。

• 当设备横置时，通过 onLayout 回调取到的根 View 宽大于高。
• 当设备竖置时，通过 onLayout 回调取到的根 View 宽小于高。

（3）同时 onLayout 回调函数还可以用来监测设备放置状态的改变，并得到改变后的新的屏幕高度和宽度。

实例

示例代码

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Dimensions
} from 'react-native';

export default class App extends Component { 
  _onLayout(event) { 
    {
      let { x, y, width, height } = event.nativeEvent.layout;
      console.log('通过onLayout得到的宽度：' + width);
      console.log('通过onLayout得到的高度：' + height);
    }

    let { width, height } = Dimensions.get('window');
    console.log('通过Dimensions得到的宽度：' + width);
    console.log('通过Dimensions得到的高度：' + height);
  }

  
  render() { 
    return (
      <View style={styles.container} onLayout = {this._onLayout}>
        
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    
  },
  
})

输出结果

03-22 11:25:25.444  1339  3924 I ReactNativeJS: 通过onLayout得到的宽度：411.4285583496094
03-22 11:25:25.444  1339  3924 I ReactNativeJS: 通过onLayout得到的高度：659.4285888671875
03-22 11:25:25.444  1339  3924 I ReactNativeJS: 通过Dimensions得到的宽度：411.42857142857144
03-22 11:25:25.444  1339  3924 I ReactNativeJS: 通过Dimensions得到的高度：683.4285714285714