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

Question

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

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

  render() {...
  }
}

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

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. 当第二个 View (DetailScreen) 处于横向并且按下后退按钮时，第一个 View (HomeScreen) 会短暂地以横向显示，然后再旋转回纵向。是否可以确保设备在返回之前已旋转到纵向？我尝试在 DetailScreen 内的 componentWillUnmount 方法中使用 async await 来做到这一点，但是当组件被卸载时，屏幕仍然处于横向状态。

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

示例可在本次 Expo Snack 中找到: https://snack.expo.io/HJ_nhkQKH

Answer 1

我针对您的问题更新了 expo snack: https://snack.expo.io/BJfXseXYB

第 1 部分。使用 NavigationEvents - onWillFocus

第 2 部分:

const RootStack = createStackNavigator(

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

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

  {
    initialRouteName: 'Home',
  }
);