隐藏堆栈导航React导航头

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

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

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

navigationOptions: { header: { visible: false } }

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

当前回答

使用最新的react-navigation-stack v4，您可以使用它隐藏头文件

import { createStackNavigator } from 'react-navigation-stack';

createStackNavigator({
 stackName: {
  screen:ComponentScreenName,
  navigationOptions: {
    headerShown:false
  }
 }
})

2021-01-07 05:18:02

其他回答

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

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

在给定的解决方案中，主屏幕头被-隐藏选择= {{headerShown:假}}

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>

2020-02-27 09:50:48

从版本5开始更新

从版本5开始，它是screenOptions中的选项headershow

用法示例:

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

如果你只想在一个屏幕上隐藏头部，你可以通过在屏幕组件上设置screenOptions来做到这一点，如下所示:

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

请参见关于版本5的博客

更新从版本2.0.0-alpha.36开始(2019-11-07), 有一个新的navigationOption: headershows

      navigationOptions: {
        headerShown: false,
      }

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

旧的答案

我用这个来隐藏堆栈条(注意这是第二个参数的值):

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

当你使用这个方法时，它将隐藏在所有屏幕上。

在你的例子中，它看起来是这样的:

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);

2017-06-22 13:49:58

const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};

2018-12-01 20:10:55

这将从组件类中删除头文件。

export default class SampleClass extends Component {
    navigationOptions = {
       headerMode: 'none'
    }
...
}

2020-08-26 21:20:57

隐藏堆栈导航React导航头

推荐文章

最新文章

标签