Question

我是反应原生的新手。我在实现ios方向时遇到了问题。我正在尝试使用反应原生方向。我已阅读文档，但无论如何都无法做到。请不要回答“lockToPortrait（），lockToLandscape（）或getOrientation（函数（错误，方向）”等方法，我已经读过这个。任何人都可以回复一段工作代码，这对我来说已经足够了

由于

Answer 1

apache

为我工作很好。

Answer 2

import React, {PureComponent} from 'react';
import {
    View,
    Text,
    Dimensions
} from 'react-native';
import Orientation from 'react-native-orientation';


const {
    width: deviceScreenWidth,
    height: deviceScreenHeight
} = Dimensions.get('window');

let aspectRatio = deviceScreenWidth / deviceScreenHeight;
export default class Home extends PureComponent {
    constructor(props) {
        super(props);
    }


    render() {
        return (
            <View style={style.homeMainContainer}>
                <Text>Atif dont let this screen rotate</Text>
            </View>
        )
    }// end of render

    componentDidMount() {

        if (deviceScreenWidth > deviceScreenHeight) {
            Orientation.lockToLandscape();
        } else {
            Orientation.lockToPortrait();
        }

        // this unlocks any previous locks to all Orientations
        // Orientation.unlockAllOrientations();

        Orientation.addOrientationListener(this._orientationDidChange);
    }

    _orientationDidChange = (orientation) => {
        if (orientation === 'LANDSCAPE') {
            // do something with landscape layout
        } else {
            // do something with portrait layout
        }
    }



};

这个例子是要弄清楚设备是平板电脑还是手机，如果它是平板电脑，它会将屏幕锁定为风景，如果它是移动设备，那么它会将屏幕锁定为肖像。

This is the library as package first you have to install the package link : https://www.npmjs.com/package/react-native-orientation

Answer 3

添加此内容是因为上述所有内容都没有提到可以在本机反应中完成，无需使用 Dimensions.addEventListener 导入库。

这是一个类的示例，可以启动该类以在您的应用中删除和添加StatusBar。

import { Dimensions } from "react-native";

class OrientationChanger {
  constructor() {
    this.update();

    Dimensions.addEventListener("change", () => {
      this.updateOrientation();
    });
  }

  update() {
    if (Dimensions.get("window").width < Dimensions.get("window").height) {
      StatusBar.setHidden(false); // "portrait"
    } else {
      StatusBar.setHidden(true); // "landscape"
    }
  }
}

export default OrientationChanger;

需要反应本机定位实现示例

3 个答案: