“headerShown: false”适用于主页,但不适用于第二页

问题描述 投票:0回答:1

我的申请有两页。我尝试了两种不同的方式。在 GuessPage 上,它覆盖了所有页面,但在单击批准并传递到 GameScreen 后;他们两个都不起作用。游戏屏幕看起来全白。文本、按钮等不会出现在 GameScreen 上,但 GuessPage 效果很好。

我已经在 Stack.Navigator 中尝试过 screenOptions={{ headerShown: false }} 和 Stack.Screen 中的 options=={{ headerShown: false }} 但它不起作用。我不想在 GuessScreen 上看到标题区域.

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="GameScreen" component={GameScreen} />
        <Stack.Screen name="Guess" component={GuessScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

&&&&& &&&&&

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="GameScreen"
          component={GameScreen}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Guess"
          component={GuessScreen}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
react-native header react-navigation
1个回答
0
投票

您的第一种方法足以隐藏您的导航标题。这里我重命名了屏幕和组件以使其更容易理解

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="GameScreen" component={GameComponent} />
        <Stack.Screen name="GuessScreen" component={GuessComponent} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

导航标题仅来自导航器,因此如果您在导航器上传递设置为 false 的 headerShown 属性,那么它将隐藏标题。您可以通过自定义 screen options 属性并将 headerShown 设置为 true 来强制它出现在该导航器中的任何屏幕上,如下所示:

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="GameScreen" component={GameComponent} options={{ headerShown: true }} />
        <Stack.Screen name="GuessScreen" component={GuessComponent} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

所以它的标题相同,它将出现在“GameScreen”中,但不会出现在“GuessScreen”中。 我没有完全理解你想要什么,但我希望这种区别有助于阐明标题的工作原理。

© www.soinside.com 2019 - 2024. All rights reserved.