隐藏堆栈导航React导航头

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

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

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

navigationOptions: { header: { visible: false } }

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

当前回答

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

其他回答

如果你使用反应导航版本: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 />;   
}

2021-09-04 17:04:24

你只能在新的更新版本(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

/*...*/
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

在v4上，只需在想要隐藏标题的页面中使用下面的代码

export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}

参考堆栈导航器

2017-06-22 13:52:19

如果你想隐藏在特定的屏幕上，可以这样做:

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}

2018-02-21 06:35:01

隐藏堆栈导航React导航头

推荐文章

最新文章

标签