Question

我有嵌套的导航，我想从底部标签导航的单个页面中隐藏标题栏（我这样做是因为我想使用其他颜色）。因此，我通过创建SleepStackScreen组件并为标题提供所需的颜色来做到这一点，但是现在我有了两个标题，一个来自TabScreen组件，另一个来自SleppStackScreen。

关于如何仅在SleepStackScreen上隐藏TabScreen标头的任何提示。

我已经尝试过options={{ headerShown: false}}，但是没有运气。

第一张图片上的绿色标题要保留在现有页面上，而第二张图片上的绿色标题要删除并保留蓝色


const SleepStackScreen = ({navigation}) => (
  <SleepStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: '#1f65ff',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}>
    <SleepStack.Screen
      name="Sleep"
      component={Sleep}
      options={({navigation, route}) => ({
        headerTitle: (props) => <Header {...props} />,
      })}
    />
  </SleepStack.Navigator>
);

const TabsScreen = () => (
  <Tabs.Navigator shifting={true} initialRouteName="Home" activeColor="#fff">
    <Tabs.Screen
      name="Home"
      component={Browser}
      options={{
        name: 'sal',
        tabBarLabel: 'Home',
        tabBarColor: '#009387',
        tabBarIcon: ({color}) => (
          <MaterialCommunityIcons name="home" color={color} size={26} />
        ),
      }}
    />
    <Tabs.Screen
      name="Sleep"
      component={SleepStackScreen}
      options={{
        tabBarLabel: 'Sleep',
        title: 'sal',
        tabBarColor: '#694fad',
        tabBarIcon: ({color}) => (
          <MaterialCommunityIcons name="sleep" color={color} size={26} />
        ),
      }}
    />
    <Tabs.Screen
      name="Settings"
      component={SettingWithContext}
      options={{
        tabBarLabel: 'Settings',
        tabBarColor: '#009387',
        tabBarIcon: ({color}) => (
          <MaterialCommunityIcons name="settings" color={color} size={26} />
        ),
      }}
    />
  </Tabs.Navigator>
);

export default CreateStack = () => {
  const [isLoading, setIsLoading] = React.useState(true);
  const [userToken, setUserToken] = React.useState(null);

  const authContext = React.useMemo(() => {
    return {
      signIn: () => {
        setIsLoading(false);
        setUserToken('asdf');
      },
      signUp: () => {
        setIsLoading(false);
        setUserToken('asdf');
      },
      signOut: () => {
        setIsLoading(false);
        setUserToken(null);
      },
    };
  }, []);

  React.useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);

  if (isLoading) {
    return <LoadingScreen />;
  }
  return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        {userToken ? (
          <Stack.Navigator
            initialRouteName={Browser}
            screenOptions={{
              //headerShown: false,
              headerStyle: {
                backgroundColor: '#009387',
              },
              headerTintColor: '#fff',
            }}>
            <Stack.Screen
              name="Browser"
              component={TabsScreen}
              options={({route}) => ({
                headerTitle: getHeaderTitle(route),
              })}
              options={({navigation, route}) => ({
                headerTitle: (props) => <Header {...props} />,
              })}
            />
            <Stack.Screen
              name="PreScreen"
              component={PreScreen}
              options={({navigation, route}) => ({
                headerTitle: (props) => <Header {...props} />,
              })}
            />
            <Stack.Screen
              name="PreScreenSleep"
              component={PreScreenSleep}
              options={({navigation, route}) => ({
                headerTitle: (props) => <Header {...props} />,
                headerStyle: {
                  backgroundColor: '#694fad',
                },
              })}
            />
            <Stack.Screen
              name="Player"
              component={Player}
              options={({navigation, route}) => ({
                headerTitle: (props) => <Header {...props} />,
              })}
            />
          </Stack.Navigator>
        ) : (
          <AuthStack.Navigator initialRouteName={RegisterLogin}>
            <AuthStack.Screen
              name="RegisterLogin"
              component={RegisterLogin}
              options={({navigation, route}) => ({
                headerTitle: (props) => <Header {...props} />,
                headerStyle: {
                  backgroundColor: '#f4511e',
                },
              })}
            />
            <AuthStack.Screen
              name="Login"
              component={LoginWithContext}
              options={({navigation, route}) => ({
                headerTitle: (props) => <Header {...props} />,
              })}
            />
            <AuthStack.Screen
              name="Register"
              component={RegisterWithContext}
              options={({navigation, route}) => ({
                headerTitle: (props) => <Header {...props} />,
              })}
            />
          </AuthStack.Navigator>
        )}
      </NavigationContainer>
    </AuthContext.Provider>
  );

Answer 1

自版本5起更新

从版本5开始，它是选项标头，显示在screenOptions

中

用法示例：

<SleepStack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <SleepStack.Screen
  name="Sleep"
  component={Sleep}
  options={({navigation, route}) => ({
    headerTitle: (props) => <Header {...props} />,
  })}
/>
</SleepStack.Navigator>

好，试试看

<SleepStack.Navigator
  screenOptions={({ route }) => { 
    let shown = true;
    if (route.state.routeNames[route.state.index] === "Sleep") {
      shown = false;
    }
    return {
      headerShown: shown
    };
  }}>
  <SleepStack.Screen
    name="Sleep"
    component={Sleep}
    options={({navigation, route}) => ({
      headerTitle: (props) => <Header {...props} />,
    })}
  />
</SleepStack.Navigator>;

在单个选项卡屏幕上隐藏标题栏

1 个答案: