在本机反应中禁用特定视图的旋转答案

【问题标题】：Disable rotation for specific views in react native在本机反应中禁用特定视图的旋转
【发布时间】：2015-12-21 21:55:06
【问题描述】：

我怎样才能只为特定视图禁用旋转（例如：使用导航器时）而不是整个应用程序？

here 的问题已经解决了禁用整个应用的轮播问题

【问题讨论】：

标签： react-native

【解决方案1】：

使用react-native-orientation 包，可以将方向锁定为纵向/横向。包和文档可以在这里找到：https://github.com/yamill/react-native-orientation

记住；你不应该把你的锁定放在场景的渲染中（也不应该 renderScene 方法）。由于 Navigator 会重新渲染路由堆栈中的所有场景，这可能会给您带来奇怪的副作用。相反，锁定/解锁应该放在与路由堆栈交互的代码中（即调用push/pop 方法）。

【讨论】：

它还在工作吗？我发现了很多被遗忘的问题，该模块的最后一次更新似乎是大约 3 年前

【解决方案2】：

如果您的案例是关于在 StackNavigator 中对不同屏幕的方向进行更具体的控制（例如 Portrait -> LandscapeLeft -> LandscapeRight -> Portrait，然后一直返回），这里有一个可能不那么漂亮的解决方案：

需要的包：react-navigation，react-native-orientation；

如下定义基本屏幕：

// baseScreen.js
import React, { Component } from "react";
import Orientation from "react-native-orientation";

export class PortraitScreen extends Component {

    constructor(props) {
        super(props);
        this._willFocusSubscription = this.props.navigation.addListener("willFocus", payload => {
            // lock to portrait when this screen is about to appear
            Orientation.lockToPortrait();
        })
    }

    componentWillUnmount() {
        // remove subscription when unmount
        this._willFocusSubscription.remove();
    }
}

export class LandscapeScreen extends Component {

    constructor(props) {
        super(props);
        this._willFocusSubscription = this.props.navigation.addListener("willFocus", payload => {
            // lock to landscape
            Orientation.lockToLandscape();
        })
    }

    componentWillUnmount() {
        // remove subscription either
        this._willFocusSubscription.remove();
    }
}

定义扩展上述基本屏幕的具体屏幕：

// moduleScreens.js
import React from "react";
import { Button, View } from "react-native";
import { PortraitScreen, LandscapeScreen } from "/path/to/baseScreen";

export class VideoDescScreen extends PortraitScreen {
    render() {
        return (
            <View>
                <Button 
                    title="watch video"
                    onPress={() => this.props.navigation.navigate("VideoPlayer")}    
                />
            </View>
        )
    }
}

export class VideoPlayerScreen extends LandscapeScreen {
    render() {
        return <View>...</View>
    }
}

像这样创建路线：

// route.js
import React from "react";
import { createStackNavigator } from "react-navigation";
import { VideoDescScreen, VideoPlayerScreen } from "/path/to/moduleScreens";

const stack = createStackNavigator(
    {
        VideoDesc: {
            screen: VideoDescScreen
        },
        VideoPlayer: {
            screen: VideoPlayerScreen
        }
    }
)

它是如何工作的？根据doc，我们在屏幕初始化时观察到事件willFocus，并且每次该屏幕即将在导航中出现（聚焦）时，我们将设备锁定到我们想要的方向，适用于PUSH（to）和POP（回）行为。

希望对你有帮助。

【讨论】：