React Native中Native Base Alert自定义组件无法显示问题求助

以下是针对你遇到问题的具体排查和修复方案：

• 检查AuthContext的状态更新逻辑
  确保调用setAlert时传入全新的对象引用，而非直接修改原有alert对象的属性。React上下文依赖引用变化触发组件重渲染，错误的写法（直接修改属性）不会触发更新：

  // 正确的更新方式
  setAlert({ status: "error", message: "操作失败" });
  // 错误的更新方式（不会触发重渲染）
  // alert.message = "操作失败";
  // setAlert(alert);
  

• 修复useEffect的内存泄漏与触发问题
  当前useEffect未清理定时器，可能导致组件卸载后报错或状态异常。添加清理函数，同时确保定时器仅在alert消息存在时创建：

  useEffect(() => {
    let timer;
    if (alert.message) {
      timer = setTimeout(() => {
        clearAlert();
      }, 5000);
    }
    // 组件卸载或alert变化时清理定时器
    return () => clearTimeout(timer);
  }, [alert]);
  

• 确保组件在Native Base Provider范围内
  CustomAlert使用了Alert、VStack等Native Base组件，必须保证整个应用被NativeBaseProvider包裹，否则这些组件无法正常渲染：

  // 根组件示例
  import { NativeBaseProvider } from 'native-base';
  
  function App() {
    return (
      <NativeBaseProvider>
        {/* 你的应用组件，包括CustomAlert */}
      </NativeBaseProvider>
    );
  }
  

• 替换硬编码文本为实际alert消息
  当前代码中Text显示的是固定字符串Qualquer mensagem，需替换为alert.message才能展示动态提示内容：

  <Text fontSize="sm" color="coolGray.200">
    {alert.message}
  </Text>
  

• 验证alert状态的初始值与更新时机
  确认AuthContext中alert的初始值为{status: "", message: ""}，且触发alert的场景（如接口报错、表单验证失败）中，setAlert确实被正确调用。

内容的提问来源于stack exchange，提问作者José Carlos