如何在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();
    },
  }
  ...
}