react-native - 如何在 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。我对这个问题的解决方案是在每次按下时设置选项卡的方向，导致当您单击其他选项卡时不会卸载选项卡屏幕。要解决此问题，您可以添加 tabBarOnPress给您的 navigationOptions你的屏幕像这样

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