Javascript 标题标题不随底部导航而更改React Native navigation v5

正如代码所示，我有嵌套导航。现在，我正试图使标题栏。但是，当我从底部导航更改屏幕时，标题保持不变，无论我在哪个屏幕上（始终是在浏览器屏幕上）。另外，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>
);
};

const Stack=createStackNavigator（）；
const Tabs=createMaterialBottomTabNavigator（）；
const AuthStack=createStackNavigator（）；
常量选项卡屏幕=（）=>(
(
),
}}
/>
(
),
}}
/>
(
),
}}
/>
);
导出默认CreateStack=（）=>{
const[isLoading，setIsLoading]=React.useState（true）；
const[userToken，setUserToken]=React.useState（null）；
const authContext=React.useMoom（（）=>{
返回{
签名：（）=>{
设置加载（假）；
setUserToken（'asdf'）；
},
注册：（）=>{
设置加载（假）；
setUserToken（'asdf'）；
},
注销：（）=>{
设置加载（假）；
setUserToken（null）；
},
};
}, []);
React.useffect（（）=>{
设置超时（（）=>{
设置加载（假）；
}, 1000);
}, []);
如果（孤岛加载）{
返回；
}
返回(
{userToken(
) : (
)}
);
};

如果希望每个选项卡名称都位于顶部，请尝试以下方法：

---

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

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

您可能希望在每个选项卡内创建一个堆栈导航器，以便每个选项卡都有自己的标题和导航路径

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

例如：

    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;

const Stack=createStackNavigator（）；
const Tabs=createMaterialBottomTabNavigator（）；
const AuthStack=createStackNavigator（）；
常量选项卡屏幕=（）=>(
颜色
}}
/>
颜色
}}
/>
颜色
}}
/>
);
让CreateStack=（）=>{
const[isLoading，setIsLoading]=React.useState（true）；
const[userToken，setUserToken]=React.useState（null）；
const authContext=React.useMoom（（）=>{
返回{
签名：（）=>{
设置加载（假）；
setUserToken（“asdf”）；
},
注册：（）=>{
设置加载（假）；
setUserToken（“asdf”）；
},
注销：（）=>{
设置加载（假）；
setUserToken（null）；
},
};
}, []);
React.useffect（（）=>{
设置超时（（）=>{
设置加载（假）；
}, 1000);
}, []);
如果（孤岛加载）{
返回；
}
返回(
{userToken(
{/*将选项属性添加到浏览器屏幕*/}
({
headerTitle:getHeaderTitle（路线），
})}
/>
) : (
)}
);
};
/**
*方法获取基于组件的路由名称。
*/
const getHeaderTitle=（路由）=>{
如果（路由==“浏览器”）{
返回“家”；
}else if（路由==“睡眠”）{
返回“睡眠”
}否则如果（路由==“设置”）{
返回“设置”；
}否则{
返回路线；
}
}
导出默认的CreateStack；

标题是堆栈导航中的一项内容，而不是选项卡导航中的一项内容。 您的应用程序正在使用嵌套选项卡导航器的堆栈导航器的标题

---

您可以在选项卡导航器中嵌套堆栈导航器，以便根据需要更改标题。

您能详细说明“东西”是什么吗？是否为元素？使用StackNavigation时，默认情况下，React导航配置为提供标题。您可以通过道具“选项”手动设置标题，否则它将只使用“名称”道具。另一方面，TabNavigators没有设置为在目标屏幕上显示标题，因此没有可以配置标题的标准道具。