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

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

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

navigationOptions: { header: { visible: false } }

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


当前回答

如果你只想从react-native-navigation的一个屏幕上删除它,那么:

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

其他回答

v6

headerMode道具已从react导航6.x中移除。现在我们可以使用headershows选项来实现相同的结果。

<Stack.Navigator screenOptions={{ headerShown: false }}>
   {/* Your screens */}
</Stack.Navigator>

v5

在react导航5。你可以通过将Navigator的headerMode道具设置为false来隐藏所有屏幕的头部。

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>
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,

};

对我来说,navigationOptions不起作用。下面的方法对我很有效。

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

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

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

为4。x, header: null已弃用,应该使用headershow: false代替

ex:

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})