如何使用 React Native Stack Navigation 处理锁定方向

我有一个在 iOS 和 Android 上运行的 React Native Expo 应用程序，使用具有两个视图的堆栈导航。第一个视图锁定为纵向屏幕方向

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

  render() {...
  }
}

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

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

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

  render() {...
  }
}

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

1. 当第二次查看时 (DetailScreen）处于横向状态并且按下后退按钮，第一个视图（主屏幕）会在旋转回纵向方向之前以横向状态短暂显示。是否可以确保设备在返回之前已旋转至纵向？我尝试使用这样做async await in the componentWillUnmount里面的方法DetailScreen，但卸载组件后屏幕仍处于横向状态。

2. 使用手势我可以导航回HomeScreen。但做这个手势的时候DetailScreen以横向显示时，HomeScreen也以横向显示。我该如何处理这个问题？是否可以以某种方式禁用此手势DetailScreen当处于横向方向时？

这个例子可以在这个 Expo Snack 中找到：https://snack.expo.io/HJ_nhkQKH https://snack.expo.io/HJ_nhkQKH

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

第 1 部分：使用 NavigationEvents - onWillFocus

Part 2:

const RootStack = createStackNavigator(

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

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

  {
    initialRouteName: 'Home',
  }
);