如何使用 React Native Stack Navigation 处理锁定的方向 [英] How to handle locked orientation using React Native Stack Navigation

问题描述

我有一个在 iOS 和 Android 上运行的 React Native Expo 应用程序，它使用带有两个视图的 Stack Navigation.第一个视图被锁定为纵向屏幕方向

I've an React Native Expo app running on both iOS and Android using Stack Navigation with two views. The first view is locked to portrait screen orientation

export class HomeScreen extends Component {
  componentWillMount() {
    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
  }

  render() {...
  }
}

第二个视图应该在纵向和横向屏幕方向都可用:

The second view should be available in both portrait and landscape screen orientation:

export class DetailScreen extends Component {
  componentDidMount() {
    ScreenOrientation.lockAsync(
      ScreenOrientation.OrientationLock.ALL_BUT_UPSIDE_DOWN
    );
  }

  async componentWillUnmount() {
    await ScreenOrientation.lockAsync(
      ScreenOrientation.OrientationLock.PORTRAIT_UP
    );
  }

  render() {...
  }
}

这几乎按预期工作，但我有两个问题:

This is working almost as expected, but I have two issues:

1. 当第二个视图 (DetailScreen) 处于横向并按下后退按钮时，第一个视图 (HomeScreen) 会在旋转回纵向之前短暂地以横向显示.是否可以确保设备在返回之前已旋转为纵向?我尝试在 DetailScreen 内的 componentWillUnmount 方法中使用 async await 来执行此操作，但卸载组件时屏幕仍处于横向状态.

1. When second view (DetailScreen) is in landscape and the back button is pressed, the first view (HomeScreen) is briefly shown in landscape orientation before rotation back to the portrait orientation. Is it possible to ensure that the device has rotated to portrait before navigating back? I tried doing that using async await in the componentWillUnmount method inside the DetailScreen, but the screen is still in landscape when the component is unmounted.

1. 使用手势我可以导航回 HomeScreen.但是当 DetailScreen 以横向显示时执行此手势，HomeScreen 也以横向显示.我该如何处理?在横向时，是否可以在 DetailScreen 内以某种方式禁用此手势?

1. Using gestures I'm able to navigate back to the HomeScreen. But doing this gesture when the DetailScreen is shown in landscape, the HomeScreen is shown in landscape as well. How can I handle this? Is it possible somehow to disable this gesture inside the DetailScreen when in landscape orientation?

此 Expo Snack 中提供了该示例:https://snack.expo.io/HJ_nhkQKH

The example is available in this Expo Snack: https://snack.expo.io/HJ_nhkQKH

推荐答案

针对您的问题，我更新了世博小吃:https://snack.expo.io/BJfXseXYB

I updated the expo snack for your question: https://snack.expo.io/BJfXseXYB

第 1 部分.使用 NavigationEvents - onWillFocus

Part 1. using NavigationEvents - onWillFocus

第 2 部分:

const RootStack = createStackNavigator(

  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },

    DetailView: {
      screen: DetailScreen,
      navigationOptions: {
        gesturesEnabled: false,
      },
    },
  },

  {
    initialRouteName: 'Home',
  }
);

这篇关于如何使用 React Native Stack Navigation 处理锁定的方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！