时间戳

首页 > 解决方案 > 添加身份验证后在其他选项卡屏幕上显示主页标题。（遵循反应导航文档）

javascript - 添加身份验证后在其他选项卡屏幕上显示主页标题。（遵循反应导航文档）

问题描述

希望你有一个美好的一天~

在@Wen W 的帮助下，我设法在主屏幕上显示了一个主页标题。但是现在我在其他选项卡屏幕上有 Home 标题，如图所示。我应该改变什么来显示每个屏幕自己的标题？

主屏幕 历史屏幕

代码是

const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="History" component={HistoryScreen} />
      <Tab.Screen name="Request" component={RequestScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>
  );
}

const BottomStack = createStackNavigator();

function HomeStack() {
  return (
    <BottomStack.Navigator>
      <BottomStack.Screen name="Home" component={HomeTabs} />
      <BottomStack.Screen name="ShiftConfirmation" component={ShiftConfirmation} />
      <BottomStack.Screen name="ShiftConfirmed" component={ShiftConfirmed} />
      <BottomStack.Screen name="RequestConfirmation" component={RequestConfirmation} />
      <BottomStack.Screen name="RequestConfirmed" component={RequestConfirmed} />
    </BottomStack.Navigator>
  );
}

...

  return (
    <SafeAreaProvider>
      <AuthContext.Provider value={authContext}>
        <NavigationContainer>
          <Stack.Navigator>
            {state.isLoading ? (
              // We haven't finished checking for the token yet
              <Stack.Screen name="Splash" component={SplashScreen} />
            ) : state.userToken == null ? (
              // No token found, user isn't signed in
              <Stack.Screen
                name="SignIn"
                component={SignInScreen}
                options={{
                  title: 'Sign in',
              // When logging out, a pop animation feels intuitive
                  animationTypeForReplace: state.isSignout ? 'pop' : 'push',
                }}
              />
            ) : (
              // User is signed in
              <Stack.Screen options={{ headerShown: false }} name="SignedIn" component={HomeStack} />
            )}
          </Stack.Navigator>
        </NavigationContainer>
      </AuthContext.Provider>
    </SafeAreaProvider>
  );
}

标签： javascriptreactjsreact-navigation

解决方案

因为你有两个名为Home. 您可以从其中一个中删除标题。

) : (
              // User is signed in
              <Stack.Screen options={{headerShown: false}} name="Home" component={HomeTabs} />
            )}
          </Stack.Navigator>

……

  <BottomStack.Screen options={{headerShown: false}} name="Home" component={HomeScreen} />

...

推荐阅读