隐藏堆栈导航React导航头

我试图使用堆栈和选项卡导航器切换屏幕。

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

在这种情况下，首先使用堆栈导航器，然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时，我使用导航选项::

navigationOptions: { header: { visible: false } }

我试图在前两个组件上使用这段代码在stacknavigator。如果我使用这一行，然后得到一些错误，如:

当前回答

/*...*/
import { createNativeStackNavigator } from "@react-navigation/native-stack";
/*...*/

const {Navigator, Screen } =createNativeStackNavigator();

export function AuthRoutes(){
    return (
        <Navigator
            screenOptions={
                
                {
                    contentStyle:{
                        backgroundColor: 'transparent'
                    },
                    headerShown: false
                }
            }    
        >
            

        </Navigator>
    )

}

2022-04-20 13:25:37

其他回答

const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions

2020-02-02 18:58:17

如果有人搜索如何切换头文件，那么在componentDidMount中写一些像这样的东西:

  this.props.navigation.setParams({
      hideHeader: true,
  });

当

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

当事件完成时:

this.props.navigation.setParams({
  hideHeader: false,
});

2018-03-17 23:02:44

重要的是要将您使用的反应导航库版本与解决方案相匹配，因为它们都是不同的。对于那些因为某些原因还在使用react-navigation v1.0.0的人来说，这两种方法都有效:

在个别屏幕上禁用/隐藏头信息:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main, navigationOptions: { header: null } },
    Login: { screen: Login },
    Profile: { screen: Profile, navigationOptions: { header: null } },
  });

禁用/隐藏所有屏幕一次，使用这个:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);

2020-05-11 06:02:52

你可以像这样隐藏StackNavigator头:

const Stack = createStackNavigator();
function StackScreen() {
    return (
        <Stack.Navigator
            screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Training" component={Training} />
            <Stack.Screen name="Course" component={Course} />
            <Stack.Screen name="Signup" component={Signup} />
        </Stack.Navigator>
    );
}

2020-04-28 04:52:18

你只能在新的更新版本(react- navigation版本6)中使用headerperformed:false

import { createStackNavigator } from '@react-navigation/stack';
    const Util = createStackNavigator();
    const UtilStack = () =>{
        return(
            <Util.Navigator>
                <Util.Screen name='Splash' component={Splash} options={{ headerShown: false }}/>
            )
            <Util.Navigator>
     }

2022-05-02 10:19:45

隐藏堆栈导航React导航头

推荐文章

最新文章

标签