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

问题描述

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

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屋！