React-Native 未定义浏览器选项卡标题？ React-router-dom 导航

Question

我们在使用react-native时遇到一个问题，当我们使用react-router-dom导航到另一个页面时，它会将您发送到正确的页面，但选项卡标题显示

undefined

。但是，刷新页面后，它会显示正确的屏幕标题。这是我们导航到 /login 页面的示例：

import { Navigate } from "react-router-dom";
import { getItem } from "../utils/localStorageUtil";
import WebMain from "./WebMain";
import { HomeStack } from "./WebMain";

const AuthContainer = () => {

  const token = getItem('token');

  return token ? <WebMain stack={HomeStack} /> : <Navigate to="/login" replace />
}

export default AuthContainer;

这是我们的路线：

import * as React from 'react';
import MobileMain from './navigation/MobileMain';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import ViewPage from './Components/ViewOnlyComponents/ViewPage';
import WebMain, { GalleryStack, LibraryStack, ProfileStack, LoginStack, RegisterStack, VerificationStack, CameraConnectionsStack } from './navigation/WebMain';
import { MenuProvider } from 'react-native-popup-menu';
import { NavigationContainer } from '@react-navigation/native';
import { DataProvider } from './Components/ContextProvider';
import AuthContainer from './navigation/AuthContainer';

const PageNotFound = () => (
  <div>
    <h1>Page Not Found</h1>
    <p>Oops! The page you're looking for does not exist.</p>
  </div>
);

const PathRouter = () => (
  <Router>
    <Routes>
      {/* Route with URL parameters */}
      <Route path="/view-photos/:parameter1/" element={<ViewPage />} />
      {/* Route for when "/view" parameter is not present */}
      <Route path="/" element={<AuthContainer />} />
      <Route path="/home" element={<Navigate to="/" />} />
      <Route path="/login" element={<WebMain stack={LoginStack} />} />
      <Route path="/register" element={<WebMain stack={RegisterStack} />} />
    </Routes>
  </Router>
);

这是 LoginStack 的样子：

export const LoginStack = () => (
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Login" component={LoginScreen} />
  </Stack.Navigator>
);

因此选项卡应显示名称“登录”。当我们重定向，甚至复制链接到其他页面时，它最初将选项卡标题设置为未定义。刷新后，它会将正确的名称放在那里。关于为什么以及如何解决这个问题有什么见解吗？

期望使用 dom 包中的 Navigate 或 useNavigate 重定向到页面，并使其正确显示选项卡名称。它最初不在重定向上，仅显示

undefined

。刷新浏览器页面后，显示正确的名称

Answer 1

有趣的问题，切换到页面时似乎出现延迟或缺乏更新。您是否尝试过利用 Stack 组件的 title 属性？

    export const LoginStack = () => (
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Login" component={LoginScreen} title="Login" />
  </Stack.Navigator>
);

您可以在这里找到更多信息