Header 标题不随底部导航改变 React Native Navigation v5

Question

所以我得到了嵌套导航，如代码所示。现在我正在尝试制作 header 栏。然而，当我从底部导航更改屏幕时，header 保持不变，无论我在哪个屏幕上（始终是我在浏览器屏幕上的鞋子）。 React 导航 header 也是创建 header 栏的最佳选择，还是创建完全自定义的导航栏更好。谢谢

我希望 header 标题会根据页面变化。

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

如果你想让每个选项卡名称都位于顶部，试试这个：https://reactnavigation.org/docs/screen-options-resolution/

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

Answer 2

因为您使用的是嵌套导航，并且堆栈导航器是 parent 导航器，所以顶部 header 对于 TabNavigator 内的任何导航器都将保持不变。

您可能想在每个选项卡中创建一个堆栈导航器，这样每个选项卡都有自己的 header 标题和导航路径。

另一方面，您可以尝试使用 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 3

header 是堆栈导航中的东西，而不是 tab-navigation 中的东西。您的应用正在使用 stack-navigator 的 header，其中嵌套了 tab-navigator。

您可以在 Tab-Navigator 中嵌套堆栈导航器，以便根据需要更改 header。

Header 标题不随底部导航改变 React Native Navigation v5

Header title not changing with bottom navigation React Native Navigation v5

javascript

reactjs

react-native

react-navigation

react-navigation-v5