Expo集成react-native-gifted-chat时应用崩溃及包错误问题

环境版本 #

"expo": "~52.0.36",
"react": "18.3.1",
"react-native": "0.76.7",
"react-native-gifted-chat": "^2.4.0"

文件结构 #

• (tabs)
  • settings.tsx
  • local-chat.tsx

组件代码 #

local-chat.tsx仅实现基础聊天界面：

export default function LocalChat() {
  const { theme } = useThemeStore();
  const [messages, setMessages] = useState<IMessage[]>([]);

  const onSend = useCallback((messages: IMessage[] = []) => {
     setMessages((previousMessages) => GiftedChat.append(previousMessages, messages));
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <GiftedChat
        messages={messages}
        onSend={(messages) => onSend(messages)}
        user={{
          _id: 1,
        }}
      />
    </View>
  );
};

问题现象 #

已安装react-native-gifted-chat及所有依赖，但使用GiftedChat组件时，local-chat.tsx停止渲染；移除GiftedChat后，组件可正常在标签栏显示。

报错信息 #

(NOBRIDGE) ERROR Error: The package 'react-native-keyboard-controller' doesn't seem to be linked. Make sure:

• You have run 'pod install'
• You rebuilt the app after installing the package
• You are not using Expo Go
  [Component Stack]
  (NOBRIDGE) WARN Route "./(tabs)/local-chat.tsx" is missing the required default export. Ensure a React component is exported as default. [Component Stack]

解决方案 #

1. 处理react-native-keyboard-controller依赖问题 #

react-native-gifted-chat v2.x依赖react-native-keyboard-controller，Expo环境下需按以下方式处理：

• 执行npx expo install react-native-keyboard-controller安装适配Expo的版本
• 由于Expo Go不支持自定义原生模块，必须切换到开发构建：
  1. 执行npx expo prebuild生成原生项目文件
  2. 重新构建运行：iOS用npx expo run:ios，Android用npx expo run:android
• 若已预构建，重新执行npx pod-install（iOS）确保依赖链接正确

2. 修复组件导出问题 #

虽然代码里有默认导出，但缓存或编译问题可能导致报错：

• 清除Expo缓存：npx expo start --clear
• 检查文件内是否有多个导出语句，确保仅保留一个export default

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