React Native Expo中Stream Chat图标显示为Uni、U、Un等字符的问题排查求助

阿华AIGC实验室

2026-4-2

看起来你遇到了Stream Chat UI图标渲染异常的问题，这种字符占位的情况一般都是图标字体没正确加载或者配置出了问题，我帮你梳理几个常见的排查方向，你可以逐一试试：

确认Stream Icons字体已正确配置并加载
Stream Chat React Native的图标依赖StreamIcons自定义字体，在Expo项目中，字体加载的时机和配置非常关键：

先确认项目中是否能找到该字体文件，通常安装stream-chat-react-native后，它会在node_modules/stream-chat-react-native/src/assets/fonts/StreamIcons.ttf路径下

在expo.config.js（或app.json）的expo.fonts数组中添加该字体的配置：

"expo": {
  "fonts": [
    {
      "asset": "node_modules/stream-chat-react-native/src/assets/fonts/StreamIcons.ttf"
    }
  ]
}

在App入口组件中，用Expo的useFonts钩子预加载字体，确保Chat UI渲染前字体已加载完成：

import { useFonts } from 'expo-font';
import { StreamChat } from 'stream-chat';
import { Chat } from 'stream-chat-react-native';

export default function App() {
  const [fontsLoaded] = useFonts({
    StreamIcons: require('stream-chat-react-native/src/assets/fonts/StreamIcons.ttf'),
  });

  if (!fontsLoaded) {
    return <Text>加载中...</Text>; // 或者自定义加载组件
  }

  const client = StreamChat.getInstance('你的API密钥');
  return (
    <Chat client={client}>
      {/* 你的Chat UI子组件 */}
    </Chat>
  );
}

验证依赖版本兼容性与完整性
你使用的stream-chat v9.19.0和stream-chat-react-native v8.5.0版本理论上是兼容的，但还是要排查依赖问题：
1. 运行npm ls stream-chat stream-chat-react-native（或yarn list stream-chat stream-chat-react-native）检查是否存在嵌套版本冲突
2. 如果发现冲突，尝试删除node_modules、package-lock.json（或yarn.lock），然后重新执行npm install（或yarn install）重装依赖
确认react-native-svg的Expo兼容配置
部分Stream Chat图标基于SVG实现，在Expo环境中要确保使用兼容版本：
1. 不要用普通的npm install react-native-svg，而是执行expo install react-native-svg来安装Expo预构建的兼容版本
2. 检查你的Expo SDK版本与react-native-svg版本是否匹配（比如Expo SDK 49对应react-native-svg ~13.10.0，可根据你的SDK版本调整）
排查react-native-asset的潜在冲突
Expo本身已经内置了资源加载能力，react-native-asset可能会和Expo的资源系统冲突：
1. 尝试卸载react-native-asset：npm uninstall react-native-asset（或yarn remove react-native-asset）
2. 完全改用Expo原生的字体配置方式（即第一点提到的方法）

检查自定义主题的字体配置
如果你给Stream Chat设置了自定义主题，要确保没有错误覆盖图标字体：

const customTheme = {
  // 必须确保这个值是StreamIcons，不能是其他字体
  iconFontFamily: 'StreamIcons',
  // 其他主题配置...
};

<Chat client={client} theme={customTheme}>
  {/* 你的Chat UI */}
</Chat>