Tamagui toast 给出有关 PortalProvider 的错误

Question

我尝试在我的应用程序中使用 Tamagui toast 并收到有关

PortalProvider

的错误（在屏幕截图中给出）。我从 expo+nextjs 入门代码 中获取参考，以获得一个简单的最小示例。

即使使用

PortalProvider

包装我的应用程序代码（参考此问题），错误仍然存在。这是我的代码 -

// Relevant imports
// ...
import { Toast, ToastViewport, ToastProvider, useToastState } from "@tamagui/toast";

const isExpo = Constants.executionEnvironment === ExecutionEnvironment.StoreClient;

const NativeToast = () => {
  const currentToast = useToastState();
  if (!currentToast || currentToast.isHandledNatively) {
    return null;
  }
  return (
    <Toast
      key={currentToast.id}
      duration={currentToast.duration}
      viewportName={currentToast.viewportName}
    >
      <YStack>
        <Toast.Title lineHeight={8}>{currentToast.title}</Toast.Title>
        {!!currentToast.message && (
          <Toast.Description>{currentToast.message}</Toast.Description>
        )}
      </YStack>
    </Toast>
  );
};

const MyToastProvider: FC<PropsWithChildren> = ({ children }) => {
  return (
    <ToastProvider
      swipeDirection="horizontal"
      duration={6000}
      native={[
        /* uncomment the next line to do native toasts on mobile. NOTE: it'll require you making a dev build and won't work with Expo Go */
        "mobile",
      ]}
    >
      {children}
      {isExpo ? <NativeToast /> : null}
      <ToastViewport top={24} left={12} right={12} />;
    </ToastProvider>
  );
};

export function App() {
  return (
    <PortalProvider>
      <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
        <MyToastProvider>
          {/* My app here */}
        </MyToastProvider>
      </TamaguiProvider>
    </PortalProvider>
  );
}

export default App;

Answer 1

我通过将

tamagui-toast

版本更新为主

tamagui

包的正确版本解决了这个问题（我的

tamagui-toast

包版本稍落后）。