React Native 之判断横竖屏显示

1.这应用启动时能检测到设备是横置还是竖直的

2.当设备横竖屏切换时候 能坚持到这个事件

检测设备是竖直还是横置的一个方法是获取当前设备屏幕的宽与高，正常的设备在竖着的时候，宽小于高；而横置时，宽大与高。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,Text,View
} from 'react-native';
let Dimensions = require('Dimensions');

export default class ViewProject extends Component {

  render() {
    return (
      <View style={styles.container}
        onLayout={this._onLayout}
      >
       <Text style={styles.welcome}
         onLayout={this._onLayoutText}
        >
         Welcome to React Native
       </Text>
      </View>
    );
  }

  _onLayout(event){
  {
    let {x,y,width,height} = event.nativeEvent.layout;
    console.log("width from View onLayout:"+width);
    console.log("height from View onLayout:"+height);
    console.log("X from View onLayout:"+x);
    console.log("y from View onLayout:"+y);
    if(height>width){
     console.log("通过View判断 竖屏");
     }else{
     console.log("通过View判断 横屏");
    }
  }
  let {width,height} = Dimensions.get('window');
  console.log("width from Dimensions:"+width);
  console.log("height from Dimensions:"+height);
  
  if(height>width){
   console.log("Dimensions 竖屏");
  }else{
   console.log("Dimensions 横屏");
  }
  
  console.log("rn");
 
  
}

_onLayoutText(event){
  let {x,height} = event.nativeEvent.layout;
  console.log("width from Text onLayout:"+width);
  console.log("height from Text onLayout:"+height);
  console.log("X from Text onLayout:"+x);
  console.log("y from Text onLayout:"+y);
  console.log("rn");
 }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent:"center",alignItems:"center",backgroundColor:"#F5FCFF",},welcome:{
    fontSize:20,textAlign:'center',margin:10,}
});
AppRegistry.registerComponent('ViewProject',() => ViewProject);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!