使用GluestackUI的Expo应用已包裹Styled Provider仍报错求助

问题分析 #

你遇到的错误核心是：GluestackUI的token解析依赖StyledProvider（由@gluestack-ui/provider提供），且必须传入主题配置才能正常工作。虽然你用了GluestackUIProvider，但大概率是自定义的Provider没有正确集成主题配置，或者实现有误。

解决方案 #

1. 修复自定义GluestackUIProvider的实现 #

检查你自定义的@/components/ui/gluestack-ui-provider.tsx文件，确保它正确导入官方Provider并传入主题配置：

// @/components/ui/gluestack-ui-provider.tsx
import React from 'react';
import { GluestackUIProvider as Provider } from '@gluestack-ui/provider';
// 导入官方默认配置，或者你自己的自定义主题
import { config } from '@gluestack-ui/config';

type Props = {
  children: React.ReactNode;
};

export const GluestackUIProvider = ({ children }: Props) => {
  // 必须传入config参数，否则无法解析token
  return <Provider config={config}>{children}</Provider>;
};

2. 直接使用官方Provider测试（快速验证） #

如果自定义Provider暂时排查不出问题，可以先替换为官方Provider来确认：

修改App.tsx的导入：

// 替换原来的自定义Provider导入
import { GluestackUIProvider } from '@gluestack-ui/provider';
import { config } from '@gluestack-ui/config';

然后更新App组件的返回部分：

export default function App() {
  useEffect(() => {
    console.log("[App] Mounted");
  }, []);

  return (
    <GluestackUIProvider config={config}>
      <UserProvider>
        <NavigationContainer>
          <RootNavigation />
        </NavigationContainer>
        <StatusBar style="light" />
      </UserProvider>
    </GluestackUIProvider>
  );
}

3. 清除Expo缓存并重启 #

缓存可能导致配置不生效，执行以下命令重启项目：

npx expo start --clear

4. 确认所有GluestackUI组件都在Provider内部 #

检查项目中是否有@gluestack-ui/themed的组件（比如View、Text）被渲染在GluestackUIProvider之外，这也会触发该错误。从你的代码看，LoadingScreen在RootNavigation内部，而RootNavigation已经被Provider包裹，这部分没问题，但仍需确认其他路由或组件是否存在这种情况。

内容的提问来源于stack exchange，提问作者Detona Games