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

时间:2019-10-15 07:13:44

标签: react-native react-navigation expo

我有一个使用两个视图的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)处于横向并且按下返回按钮时,在旋转回到纵向之前,将以横向显示短暂显示第一个视图(HomeScreen)。是否可以确保在返回之前将设备旋转到纵向?我尝试在async await内部的componentWillUnmount方法中使用DetailScreen来执行此操作,但是在卸载组件时,屏幕仍然处于横向。

HomeSceen is briefly shown in landscape orientation

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

enter image description here

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

1 个答案:

答案 0 :(得分:3)

我为您的问题更新了博览会小吃: 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',
  }
);