react-native - 在堆栈导航器中隐藏标题

Question

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

尝试headerShown：false，不起作用

图 图2图3

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>
);

标签： react-native

Answer 1

导航选项：{ headerShown：假，}

把它放在你<Stack.Screen的组件中

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