隐藏堆栈导航React导航头

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

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

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

navigationOptions: { header: { visible: false } }

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

当前回答

所有的答案都展示了如何用类组件来实现，但是对于功能组件你需要做:

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

如果你删除了头部，你的组件可能在你看不到的地方(当手机没有方形屏幕时)，所以在删除头部时使用它是很重要的。

2019-07-12 17:58:57

其他回答

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

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

尝试最好的方法，下面的代码适用于我。

options={{
    headerShown: false,
}}

把上面的代码放在<Stack中。屏幕标签。

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

2021-11-18 14:10:08

在react-navigation的最新版本中，这可以在每个屏幕上隐藏标题:

<堆栈。领航员 headerMode ={“郎”} > <堆栈。屏幕 <堆栈。屏幕名 < /堆栈。领航员>

2020-06-21 22:40:52

隐藏堆栈导航React导航头

推荐文章

最新文章

标签