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

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

1 个答案: