Как обрабатывать заблокированную ориентацию с помощью React Native Stack Navigation

Question

У меня есть приложение React Native Expo, работающее на iOS и Android с использованием Stack Navigation с двумя представлениями. Первый вид привязан к книжной ориентации экрана

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, но экран все еще находится в горизонтальной ориентации, когда компонент отключен.

Используя жесты, я могу вернуться к HomeScreen. Но делая этот жест, когда DetailScreen отображается в альбомной ориентации, HomeScreen также отображается в альбомной ориентации. Как я могу справиться с этим? Можно ли как-то отключить этот жест внутри DetailScreen в альбомной ориентации?

Пример доступен в этом Экспо Снэк: https://snack.expo.io/HJ_nhkQKH

Answer 1

Я обновил выставочную закуску для вашего вопроса: 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',
  }
);