"headerShown: false" works main page but not work in second page

Question

My application has two pages. I have tried two different way.On GuessPage, it covers all page but after clicked approve and passed to GameScreen; it doesn't work both of them. GameScreen seems all white. Text,button etc don't seem on GameScreen but GuessPage works well.

I have tried screenOptions={{ headerShown: false }} in Stack.Navigator and options=={{ headerShown: false }} in Stack.Screen but it doesn't work.I don't want to see Header Area on 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>
  );
}

Answer 1

Your first approach is good enough to hide your navigation header. Here I renamed the screens and components to make it easier to understand

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

The navigation header will only come from a navigator, so if you pass the prop headerShown set as false, on the navigator then it will hide the header. You can force it to appear on any screen in this navigator by customizing the screen options prop and passing headerShown set to true like below:

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

So its the same header, it will appear in "GameScreen" but it will not appear in "GuessScreen". I didnt fully understand what you want, but I hope this distinction helps clarify how headers work.