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

Answer 2

为我工作

   import React from 'react';
   import { NavigationContainer } from '@react-navigation/native';
   import { createStackNavigator } from '@react-navigation/stack';
       
   import HomeScreen from './screens/HomeScreen';
   import LockedOrientationScreen from'./screens/LockedOrientationScreen';
        
   const Stack = createStackNavigator();
        
        const App = () => {
          return (
            <NavigationContainer>
              <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen
                  name="LockedOrientation"
                  component={LockedOrientationScreen}
                  options={{
                    // Set screen here
                  }}
                />
              </Stack.Navigator>
            </NavigationContainer>
          );
        };
        
        export default App;
    
    
    import React, { useEffect } from 'react';
    import { View, Text } from 'react-native';
    import Orientation from 'react-native-orientation-locker';
    
    const LockedOrientationScreen = () => {
      useEffect(() => {
        Orientation.lockToPortrait();
      
        return () => {
          Orientation.unlockAllOrientations();
        };
      }, []);
    
      return (
        <View>
          <Text>hello</Text>
        </View>
      );
    };
    
    export default LockedOrientationScreen;