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

Question

我为我的应用程序使用了 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。

Answer 1

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

将 tabBarOnPress 添加到屏幕的 navigationOptions

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

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

How to lock orientation for specific screen on TabNavigator

react-native

react-navigation