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

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

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

navigationOptions: { header: { visible: false } }

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


当前回答

只需将此添加到您的类/组件代码片段和Header将被隐藏

 static navigationOptions = { header: null }

其他回答

如果有人搜索如何切换头文件,那么在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,
});

如果你的屏幕是一个类组件

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

在目标屏幕中将其编码为第一个方法(函数)。

对于单个屏幕,您可以在createStackNavigator中设置header:null或headershow: false,如下所示 const App = createStackNavigator({ 第一:{ 屏幕:回家, navigationOptions: { 标题:空, }, }, }); 使用defaultNavigationOptions一次从所有屏幕中隐藏头部 const App = createStackNavigator({ 第一:{ 屏幕:HomeActivity, }, }, { defaultNavigationOptions: { 标题:零 }, });

你可以像这样隐藏头文件:

<Stack.Screen name="Login" component={Login} options={{headerShown: false}}  />

如果你使用反应导航版本:6。X可以这样用。在这里,SignInScreen头将隐藏下面的代码片段

options={{  
   headerShown: false,  
}} 

完整的脚本应该是

import {createStackNavigator} from '@react-navigation/stack';  
import SignInScreen from '../screens/SignInscreen';  
import SignUpScreen from '../screens/SignUpScreen';  
const Stack = createStackNavigator();    
function MyStack() {  
 return (   
   <Stack.Navigator>   
     <Stack.Screen   
       name="Sing In"  
       component={SignInScreen}  
       options={{  
         headerShown: false,  
       }}   
     />  
     <Stack.Screen name="Sing Up" component={SignUpScreen} />   
   </Stack.Navigator>   
 );    
}  
export default function LoginFlowNavigator() {    
 return <MyStack />;   
}