标题标题不会随着底部导航而改变React Native Navigation v5

Question

因此，我得到了嵌套的导航，如代码所示。现在，我试图制作标题栏。但是，当我从底部导航更改屏幕时，无论我在哪个屏幕上（无论是浏览器屏幕上的鞋子），标题都保持不变。 React导航标题还是创建标题栏的最佳之选，还是创建完全自定义标题栏的最佳之选。谢谢

我希望标题标题会根据页面而改变。

const Stack = createStackNavigator();
const Tabs = createMaterialBottomTabNavigator();
const AuthStack = createStackNavigator();

const TabsScreen = () => (
<Tabs.Navigator shifting={true} initialRouteName="Home" activeColor="#fff">
<Tabs.Screen
name="Home"
component={Browser}
options={{
tabBarLabel: 'Home',
tabBarColor: '#009387',
tabBarIcon: ({color}) => (

),
}}
/>
<Tabs.Screen
name="Sleep"
component={Sleep}
options={{
tabBarLabel: 'Sleep',
tabBarColor: '#694fad',
tabBarIcon: ({color}) => (

),
}}
/>
<Tabs.Screen
name="Settings"
component={SettingWithContext}
options={{
tabBarLabel: 'Settings',
tabBarColor: '#694fad',
tabBarIcon: ({color}) => (

),
}}
/>
</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 ;
}
return (
<AuthContext.Provider value={authContext}>

{userToken ? (
<Stack.Navigator initialRouteName={Browser}>
<Stack.Screen name="Browser" component={TabsScreen} />
<Stack.Screen name="PreScreen" component={PreScreen} />
<Stack.Screen name="Player" component={Player} />
</Stack.Navigator>
) : (
<AuthStack.Navigator
screenOptions={{headerShown: false}}
initialRouteName={RegisterLogin}>
<AuthStack.Screen name="RegisterLogin" component={RegisterLogin} />
<AuthStack.Screen name="Login" component={LoginWithContext} />
<AuthStack.Screen name="Register" component={RegisterWithContext} />
</AuthStack.Navigator>
)}

</AuthContext.Provider>
);
};

Answer 1

因为您使用的是嵌套导航，并且堆栈导航器是父导航器，所以TabNavigator中任何导航器的顶部标题都将保持不变。

您可能希望在每个选项卡内创建一个堆栈导航器，因此每个选项卡将具有自己的标题和导航路径。

另一方面，您可以尝试使用screen options来创建一些业务逻辑，以便根据导航状态确定所需的标题。

例如：

    const Stack = createStackNavigator();
    const Tabs = createMaterialBottomTabNavigator();
    const AuthStack = createStackNavigator();

    const TabsScreen = () => (
      <>
        <Tabs.Navigator shifting={true} initialRouteName="Home" activeColor="#fff">
          <Tabs.Screen
            name="Home"
            component={Browser}
            options={{
              tabBarLabel: "Home",
              tabBarColor: "#009387",
              tabBarIcon: ({ color }) => color,
            }}
          />
          <Tabs.Screen
            name="Sleep"
            component={Sleep}
            options={{
              tabBarLabel: "Sleep",
              tabBarColor: "#694fad",
              tabBarIcon: ({ color }) => color,
            }}
          />
          <Tabs.Screen
            name="Settings"
            component={SettingWithContext}
            options={{
              tabBarLabel: "Settings",
              tabBarColor: "#694fad",
              tabBarIcon: ({ color }) => color,
            }}
          />
        </Tabs.Navigator>
      </>
    );

    let 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;
      }
      return (
        <AuthContext.Provider value={authContext}>
          {userToken ? (
            <Stack.Navigator initialRouteName={Browser}>
              {/* Added the options prop to the Browser screen*/}
              <Stack.Screen
                name="Browser"
                component={TabsScreen}
                options={({ route }) => ({
                  headerTitle: getHeaderTitle(route),
                })}
              />
              <Stack.Screen name="PreScreen" component={PreScreen} />
              <Stack.Screen name="Player" component={Player} />
            </Stack.Navigator>
          ) : (
            <AuthStack.Navigator
              screenOptions={{ headerShown: false }}
              initialRouteName={RegisterLogin}
            >
              <AuthStack.Screen name="RegisterLogin" component={RegisterLogin} />
              <AuthStack.Screen name="Login" component={LoginWithContext} />
              <AuthStack.Screen name="Register" component={RegisterWithContext} />
            </AuthStack.Navigator>
          )}
        </AuthContext.Provider>
      );
    };

    /**
     * Method to get the route name based on the component.
     */
     const getHeaderTitle = (route) => {
         if (route === "Browser") {
             return "Home";
         } else if (route === "Sleep") {
             return "Sleep"
         } else if (route === "Settings") {
             return "Settings";
         } else {
             return route;
         }
     }

    export default CreateStack;

Answer 2

如果要使每个标签名称都位于顶部，请尝试以下操作：https://reactnavigation.org/docs/screen-options-resolution/

检查下面的getHeaderTitle函数和switch语句-它帮助我实现了此行为。

Answer 3

标头是堆栈导航中的内容，而不是标签导航中的内容。您的应用程序使用的是嵌套有标签导航器的堆栈导航器的头。

您可以将堆栈导航器嵌套在Tab导航器中，以根据需要更改标题。