Dimensions detect orientation

gistfile1.txt

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Dimensions,
} from 'react-native';
import styled from 'styled-components/native';

const StatusBarBackground = styled.View`
  height: 20;
  backgroundColor: #fff;
`;

const Text1 = styled.Text`
  color: red;
`;

// 抓取目前裝置的寬高，用來判斷現在是直向或橫向
const isOrientationLandscape = ({ width, height }) => width > height;

export default class App extends Component<{}> {
  // 預設state抓取目前裝置轉向
  state = {
    isLandscape: isOrientationLandscape(Dimensions.get('window')),
  };

  // 使用Dimensions並加入Listener，轉向時執行handleOrientationChange
  componentDidMount() {
    Dimensions.addEventListener('change', this.handleOrientationChange);
  }

  // Component移除時並移除Listener
  componentWillUnmount() {
    Dimensions.removeEventListener('change', this.handleOrientationChange);
  }

  // 更新state
  handleOrientationChange = ({ window }) => {
    this.setState({
      isLandscape: isOrientationLandscape(window)
    });
  }

  render() {
    return (
      <View>
        {
           // 當裝置為直向時才加入<StatusBarBackground />
           !this.state.isLandscape && <StatusBarBackground />
        }
        <Text1>
          Welcome to React Native!
        </Text1>
      </View>
    );
  }