React navigation V6 typescript 如何将主题 prop 传递给导航容器

问：

我正在构建一个 react native、打字稿、应用程序。我正在使用 React Navigation V6 和 React Native Paper 作为我的 UI。我还使用 Redux 工具包进行状态管理。所有部件都工作正常。 我遵循了 React Native Paper 指南中关于使用 React Navigation 进行主题设置的指南。 当我将 Navigation 容器保存在 App.tsx 中时，所有这些工作也都完美无缺。 一旦我将 Navigation 容器移动到一个单独的组件中并尝试将主题属性传递给它，我就不断收到多个错误，如下所示。

TypeError：无法读取未定义的属性“background”

TypeError：无法读取未定义的属性“text”

应用程序.tsx

import { useColorScheme } from "react-native";
import * as React from "react";
import {
  NavigationContainer,
  DarkTheme as NavigationDarkTheme,
  DefaultTheme as NavigationDefaultTheme,
} from "@react-navigation/native";
import {
  MD3DarkTheme,
  MD3LightTheme,
  PaperProvider,
  adaptNavigationTheme,
 } from "react-native-paper";
 import merge from "deepmerge";
 import { Provider } from "react-redux";
 import PublicStack from "./src/navigation/PublicStack";
 import { PreferencesContext } from "./src/context/PreferencesContext";
 import { appStore } from "./src/store/appStore";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { IAuthState } from "./src/interfaces/IAuthentication";

 // Redux state store load from local storage if present
 // Code removed

 const { LightTheme, DarkTheme } = adaptNavigationTheme({
   reactNavigationLight: NavigationDefaultTheme,
   reactNavigationDark: NavigationDarkTheme,
 });

 const CombinedDefaultTheme = merge(MD3LightTheme, LightTheme);
 const CombinedDarkTheme = merge(MD3DarkTheme, DarkTheme);

 export default function App() {
   const [isThemeDark, setIsThemeDark] = React.useState(true);
   let appTheme = isThemeDark ? CombinedDarkTheme : CombinedDefaultTheme;

   const toggleTheme = React.useCallback(() => {
     return setIsThemeDark(!isThemeDark);
   }, [isThemeDark]);

    const preferences = React.useMemo(
      () => ({
        toggleTheme,
        isThemeDark,
      }),
      [toggleTheme, isThemeDark]
     );

     return (
       <Provider store={appStore}>
         <PreferencesContext.Provider value={preferences}>
           <PaperProvider theme={appTheme}>

             // This block with NavigationContainer has been moved into another 
             // component: AppNavigator
             // <NavigationContainer theme={appTheme}>
             //   <PublicStack />
             // </NavigationContainer>

          </PaperProvider>
         </PreferencesContext.Provider>
       </Provider>
      );
     }

AppNavigator.tsx

import * as React from "react";
import { NavigationContainer, Theme } from "@react-navigation/native";
import HomeStack from "./HomeStack";
import PublicStack from "./PublicStack";
import { useAppSelector } from "../store/hook";
import { selectAuthState } from "../store/authSlice";

const AppNavigator = (theme: Theme) => {
  const authState = useAppSelector(selectAuthState);
  return (
    <NavigationContainer theme={theme}>
      {/* Conditional stack navigator rendering based on login state */}
      {authState?.isLoggedIn ? <HomeStack /> : <PublicStack />}
     </NavigationContainer>
    );
  };

  export default AppNavigator;

如何将我的主题正确地传递到 AppNavigator.tsx？