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

Posted 2023-03-10

【中文标题】在本机反应中禁用特定视图的旋转

【英文标题】：Disable rotation for specific views in react native

【发布时间】：2015-12-21 21:55:06

【问题描述】：

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

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

【参考方案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（回）行为。

希望对你有帮助。