如何在 TabNavigator 上锁定特定屏幕的方向答案

【问题标题】：How to lock orientation for specific screen on TabNavigator如何在 TabNavigator 上锁定特定屏幕的方向
【发布时间】：2018-02-05 11:59:49
【问题描述】：

我在我的应用程序中使用了TabNavigation。在某些屏幕上，我希望它只显示在portrait 方向上，而其他屏幕是landscape。我找到了react-native-orientation 并在我的屏幕上尝试：

屏幕 1

import React from "react";
import Orientation from 'react-native-orientation';
import { Text } from 'react-native'

export default Screen1 extends React.PureComponent{

 componentDidMount(){
  Orientation.lockToLandscape();
 }

 componentWillUnmount(){
  Orientation.unlockAllOrientations();
 }

 render() {
  return(<Text>Screen 1</Text>);
 }
}

屏幕 2

import React from "react";
import Orientation from 'react-native-orientation';
import { Text } from 'react-native'

export default Screen2 extends React.PureComponent{

 componentDidMount(){
  Orientation.lockToPortrait();
 }

 componentWillUnmount(){
  Orientation.unlockAllOrientations();
 }

 render() {
  return(<Text>Screen 2</Text>);
 }
}

标签导航器

const AppNavigator = TabNavigator(  {
  Screen1: { screen: Screen1 },
  Screen2: { screen: Screen2 },
});

但它总是纵向的，这意味着它的方向总是基于我在TabNavigator 添加的最后一个屏幕的方向。任何帮助表示感谢，在此先感谢您！ 编辑 1 我尝试了StackNavigation，它可以工作。仍然不知道为什么它没有与TabNavigation 一起运行。

【问题讨论】：

尝试在componentWillMount而不是componentDidMount中锁定方向，可能是因为挂载无法锁定方向。
@MtgKhaJeskai 我试过了，但还是不行，立即重新更改为最后一个屏幕的方向。
您是否检查过 TabNavigator 中的 Screen1 和 Screen2 是否实际上正在卸载以便解锁方向？
@Unicorn Master 这似乎是导致我的错误的原因，您有什么建议让我解决它吗？

标签： react-native react-navigation

【解决方案1】：

很久没问这个问题了，react-navigation 升级到版本 3。我解决这个问题的方法是每次按下选项卡时设置选项卡的方向，导致单击时选项卡屏幕没有卸载其他选项卡。要解决此问题，您可以像这样将tabBarOnPress 添加到屏幕的navigationOptions 中

import Orientation from 'react-native-orientation';
...
class TabbarScreen1 extends Component {
  static navigationOptions = {
    ...,
    tabBarOnPress: ({ defaultHandler }) => {
      // Orientation.lockToLandscape();
      Orientation.lockToPortrait();
      defaultHandler();
    },
  }
  ...
}

【讨论】：