Expo 50升级后react-native-numeric-input图标显示异常求助

升级Expo到50.0.0版本后，react-native-numeric-input组件的加减图标显示为问号，控制台提示md-add、md-remove不是Ionicons的有效图标名称，iOS、Android模拟器及预览构建均出现该问题，重装矢量图标包无效。以下是针对性解决方案：

方案1：自定义组件图标（推荐） #

react-native-numeric-input默认使用的旧版Ionicons前缀命名（md-开头）在Expo 50对应的新版图标库中已不再适用，直接通过props传入自定义图标即可解决：

1. 导入Expo矢量图标：

import Ionicons from '@expo/vector-icons/Ionicons';

2. 修改NumericInput组件代码，替换默认图标：

<NumericInput
  initValue={playerHcp}
  value={playerHcp}
  onChange={(hcp) => playerHcpHandler({ hcp })}
  totalWidth={70}
  totalHeight={sizes.newGameInputHeight}
  fontSize={sizes.newGameFontSize}
  minValue={0}
  maxValue={54}
  textColor="#59656F"
  borderColor="#C7CBD6"
  iconStyle={{ color: "white" }}
  rightButtonBackgroundColor="#009900"
  leftButtonBackgroundColor="#06BA63"
  // 自定义加减图标
  leftButtonIcon={<Ionicons name="remove" size={20} color="white" />}
  rightButtonIcon={<Ionicons name="add" size={20} color="white" />}
/>

方案2：适配图标名称格式 #

Expo 50使用的Ionicons采用无前缀的图标命名规则，可通过组件的iconName属性替换默认前缀名称：

<NumericInput
  // ...其他原有属性
  iconName={{
    up: 'add',
    down: 'remove'
  }}
/>

注：部分旧版本react-native-numeric-input可能不支持该属性，优先选择方案1。

方案3：清理依赖冲突 #

你的package.json中同时存在expo-vector-icons和react-native-vector-icons，两者可能引发图标加载冲突，Expo项目建议仅保留expo-vector-icons：

1. 卸载冲突依赖：

npm uninstall react-native-vector-icons

2. 清理缓存并重启项目：

npx expo start --clear

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