如何创建可复用的NativeBase Toast辅助函数（解决React Hook调用无效问题）

你遇到的这个错误完全是因为违反了React Hook的核心规则：Hooks只能在函数组件的顶层作用域，或者自定义Hook的内部调用。你的ErrorAlert和SuccessAlert是普通的JavaScript函数，直接在里面调用useToast（一个React Hook）肯定会触发这个报错。

不过别担心，有几种完全合规的方案可以实现你想要的「便捷复用Toast提示」的需求，下面给你详细介绍：

方案一：创建自定义Hook（最推荐，符合React规则） #

自定义Hook是React官方允许的复用Hook逻辑的方式，它本身可以调用其他Hook，同时能在任意函数组件中使用。我们可以把Toast的显示逻辑封装成一个自定义Hook：

import { useToast } from "native-base";

export const useToastAlerts = () => {
  const toast = useToast();

  // 错误提示函数
  const showErrorAlert = (title, description) => {
    toast.show({
      duration: 2000,
      placement: "top",
      title,
      status: "error",
      description,
    });
  };

  // 成功提示函数
  const showSuccessAlert = (title, description) => {
    toast.show({
      duration: 2000,
      placement: "top",
      title,
      status: "success",
      description,
    });
  };

  return { showErrorAlert, showSuccessAlert };
};

使用方式 #

在你的函数组件里，只需要导入这个自定义Hook，解构出对应的提示函数就能调用了：

import { useToastAlerts } from "../Helper/Alert";

const MyFormComponent = () => {
  const { showErrorAlert, showSuccessAlert } = useToastAlerts();

  const handleSubmit = () => {
    try {
      // 模拟表单提交逻辑
      // ...
      showSuccessAlert("提交成功", "你的数据已保存");
    } catch (err) {
      showErrorAlert("提交失败", "请检查表单内容后重试");
    }
  };

  return (
    // 你的表单UI
  );
};

这种方式既完全符合React的Hook规则，又能实现你想要的便捷复用，而且逻辑清晰，维护起来也方便。

方案二：全局Context + 工具函数（适合非组件场景调用） #

如果你的需求是在非组件函数里调用Toast（比如API请求的拦截器、全局工具函数），可以把useToast获取到的实例通过Context全局提供，再封装对应的提示函数：

步骤1：创建Toast Context #

import { createContext, useContext, useToast } from "native-base";
import React from "react";

// 创建Context
const ToastContext = createContext(null);

// 创建Provider组件，包裹你的应用根节点
export const ToastProvider = ({ children }) => {
  const toastInstance = useToast();
  return (
    <ToastContext.Provider value={toastInstance}>
      {children}
    </ToastContext.Provider>
  );
};

// 自定义Hook，用于获取全局的toast实例
export const useGlobalToast = () => {
  const context = useContext(ToastContext);
  if (!context) {
    throw new Error("useGlobalToast 必须在 ToastProvider 内部使用");
  }
  return context;
};

步骤2：在根组件包裹Provider #

import { NativeBaseProvider } from "native-base";
import { ToastProvider } from "../Helper/Alert";

const App = () => {
  return (
    <NativeBaseProvider>
      <ToastProvider>
        {/* 你的应用所有组件 */}
      </ToastProvider>
    </NativeBaseProvider>
  );
};

步骤3：封装全局可用的提示函数 #

import { useGlobalToast } from "./ToastContext";

export const useGlobalToastAlerts = () => {
  const toast = useGlobalToast();

  const ErrorAlert = (title, description) => {
    toast.show({
      duration: 2000,
      placement: "top",
      title,
      status: "error",
      description,
    });
  };

  const SuccessAlert = (title, description) => {
    toast.show({
      duration: 2000,
      placement: "top",
      title,
      status: "success",
      description,
    });
  };

  return { ErrorAlert, SuccessAlert };
};

在非组件场景调用 #

如果要在API工具函数里使用，你需要把toast实例作为参数传递进去（因为非组件函数不能调用Hook）：

// API工具函数
export const fetchUserData = async (toastInstance) => {
  try {
    const res = await fetch("/api/user");
    const data = await res.json();
    toastInstance.show({
      duration: 2000,
      placement: "top",
      title: "获取成功",
      status: "success",
      description: "用户数据已加载",
    });
    return data;
  } catch (err) {
    toastInstance.show({
      duration: 2000,
      placement: "top",
      title: "获取失败",
      status: "error",
      description: "网络请求出错",
    });
  }
};

// 在组件里调用这个API函数
const UserProfile = () => {
  const toast = useGlobalToast();
  
  useEffect(() => {
    fetchUserData(toast);
  }, [toast]);

  return (
    // 组件UI
  );
};

方案三：封装成受控组件（简单场景适用） #

如果你只是需要在组件里简单触发提示，也可以封装成一个受控组件，通过状态控制显示：

import { useToast } from "native-base";
import React, { useEffect } from "react";

const ErrorAlert = ({ title, description, isVisible }) => {
  const toast = useToast();

  useEffect(() => {
    if (isVisible) {
      toast.show({
        duration: 2000,
        placement: "top",
        title,
        status: "error",
        description,
      });
    }
  }, [isVisible, toast, title, description]);

  return null;
};

// 同理封装SuccessAlert组件
export { ErrorAlert };

使用方式 #

import { ErrorAlert } from "../Helper/Alert";
import { useState } from "react";

const LoginComponent = () => {
  const [showLoginError, setShowLoginError] = useState(false);

  const handleLogin = () => {
    // 模拟登录失败
    if (/* 登录失败条件 */) {
      setShowLoginError(true);
      // 重置状态，避免重复触发
      setTimeout(() => setShowLoginError(false), 2000);
    }
  };

  return (
    <>
      <ErrorAlert 
        title="登录失败" 
        description="用户名或密码错误" 
        isVisible={showLoginError} 
      />
      {/* 登录表单 */}
    </>
  );
};

总的来说，方案一（自定义Hook）是最适合你的需求的，它既满足了便捷复用的要求，又完全符合React的规则，没有额外的复杂度。

内容的提问来源于stack exchange，提问作者Gracie williams