React Native(Expo)使用antd组件出现兼容错误，寻求解决办法

问题场景 #

基于Expo开发React Native项目，尝试导入antd的Select组件时，真机Expo Go中持续报错。

代码示例 #

import { useState } from "react";
import { Select } from "antd";

const App = () => {
  const [openSelect, setOpenSelect] = useState(false);

  const options = [
    { value: "country1", label: "Country1" },
    { value: "country2", label: "Country2" },
    { value: "country3", label: "Country3" },
    { value: "country4", label: "Country5" }
  ];
  return (
    <>
      <Select
        mode="multiple"
        allowClear
        style={{ width: "100%" }}
        placeholder="Select countries"
        options={options}
        size="large"
        open={openSelect}
        onDropdownVisibleChange={() => setOpenSelect(true)}
        onChange={() => setOpenSelect(false)}
      />
    </>
  );
};
export default App;

错误信息 #

Invariant Violation: View config getter callback for component `input` must be a function (received `undefined`). Make sure to start component names with a capital letter

项目依赖配置（package.json） #

{
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/datetimepicker": "8.0.1",
    "@react-native-community/picker": "1.6.0",
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/material-bottom-tabs": "^5.2.16",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.29",
    "@types/react-native-snap-carousel": "^3.8.11",
    "antd": "^5.21.6",
    "axios": "^1.7.2",
    "expo": "~51.0.38",
    "expo-application": "~5.9.1",
    "expo-build-properties": "~0.12.5",
    "expo-camera": "~15.0.16",
    "expo-chart-kit": "^1.2.4",
    "expo-constants": "^16.0.2",
    "expo-device": "^6.0.2",
    "expo-font": "~12.0.10",
    "expo-image-picker": "~15.0.7",
    "expo-insights": "~0.7.0",
    "expo-linear-gradient": "~13.0.2",
    "expo-localization": "~15.0.3",
    "expo-location": "^17.0.1",
    "expo-notifications": "~0.28.19",
    "expo-random": "~14.0.1",
    "expo-splash-screen": "~0.27.6",
    "expo-status-bar": "~1.12.1",
    "expo-updates": "~0.25.27",
    "i18n-js": "^3.7.1",
    "moment": "^2.29.1",
    "react": "18.2.0",
    "react-devtools": "^4.8.2",
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-dots-pagination": "^0.3.1",
    "react-native-element-dropdown": "^2.12.0",
    "react-native-fbsdk-next": "^13.0.0",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-loading-spinner-overlay": "^3.0.1",
    "react-native-modal": "^13.0.1",
    "react-native-modal-datetime-picker": "^9.0.0",
    "react-native-modal-selector": "^2.0.3",
    "react-native-options-menu": "^2.0.2",
    "react-native-pager-view": "6.3.0",
    "react-native-paper": "^5.12.3",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-snap-carousel": "github:capelski/react-native-snap-carousel",
    "react-native-svg": "15.2.0",
    "react-native-svg-charts": "^5.4.0",
    "react-native-vector-icons": "^9.0.0",
    "react-native-webview": "13.8.6",
    "reanimated-bottom-sheet": "^1.0.0-alpha.22",
    "reanimated-color-picker": "^3.0.4",
    "typescript": "~5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "babel-preset-expo": "~11.0.0"
  },
  "private": true,
  "name": "app1",
  "version": "1.0.0",
  "description": "some",
  "keywords": [
    "marketing"
  ],
  "author": "some",
  "license": "MIT"
}

解决建议 #

1. 核心原因
   你安装的antd是面向Web端的UI库，并非为React Native设计，直接在React Native项目中使用会导致Web DOM组件与原生组件不兼容，从而出现上述input组件未定义的错误。

2. 替代方案

   • 使用官方适配库：安装antd-mobile-rn（Ant Design官方推出的React Native版本UI库），它提供了适配原生平台的Select组件。
     • 卸载Web端antd：npm uninstall antd
     • 安装适配库：npm install antd-mobile-rn
     • 替换导入：import { Select } from 'antd-mobile-rn'
   • 使用现有依赖中的组件：项目已安装的react-native-element-dropdown或react-native-paper都提供了原生适配的下拉选择组件，可以直接用来实现多选功能。

3. 验证步骤
   替换组件库后，修改代码适配新组件的API，重新运行Expo项目即可解决报错问题。

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