【问题标题】:Hide header in stack navigator在堆栈导航器中隐藏标题
【发布时间】:2021-11-25 08:57:54
【问题描述】:

在我的 React Native 应用程序中,有一个抽屉导航器嵌套在堆栈导航器中。我想将堆栈导航器标题隐藏在所有抽屉导航器屏幕内,但在其他屏幕上可见

尝试 headerShown: false,不起作用

picpic2pic3

const StackNavigator = () => (
  <Stack.Navigator initialRouteName="Login">
    <Stack.Screen
      name="Shop"
      component={DrawerNavigator}
      options={{
        header: ({ navigation }) => (
          <Header
            statusBarProps={{ translucent: false }}
            placement="center"
            leftComponent={{
              icon: "menu",
              color: "#fff",
              onPress: () => navigation.dispatch(DrawerActions.toggleDrawer()),
            }}
            centerComponent={{
              text: "Shopping",
              style: {
                fontSize: 24,
                color: "#fff",
              },
            }}
            containerStyle={{
              backgroundColor: "#F84930",
            }}
          />
        ),
      }}
    />
    <Stack.Screen
      name="Login"
      component={Login}
      options={{
        headerShown: false,
      }}
    />
    <Stack.Screen
      name="Register"
      component={Register}
      options={{
        headerShown: false,
      }}
    />
    <Stack.Screen
      name="ProductDetail"
      component={ProductDetail}
      options={({ route }) => ({
        title: route.params.item.name,
        headerBackTitle: " return",
      })}
    />
  </Stack.Navigator>
);

【问题讨论】:

  • 你试过在 stack.navigator 上显示 headerShown 吗? reactnavigation.org/docs/stack-navigator
  • 请直接在SO中发布图片。可以直接导入,也可以使用内置链接格式![hover note](http://web.site/ima.ge)

标签: react-native


【解决方案1】:

导航选项:{ 标头显示:假, }

把这个放在你的&lt;Stack.Screen你的组件中

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

【讨论】:

    猜你喜欢
    • 2017-11-25
    • 2020-02-14
    • 1970-01-01
    • 2020-05-27
    • 2011-01-07
    • 1970-01-01
    • 2021-12-01
    • 1970-01-01
    • 2011-06-26
    相关资源
    最近更新 更多