React Native集成UI Kitten图标时Android端出现空对象引用错误

问题详情 #

集成UI Kitten与Eva图标包后，iOS端运行正常，但Android端触发空指针错误：

Attempt to invoke virtual method int java.lang.Integer.intValue() on a null object reference

报错触发点为<Icon name="facebook" />组件，移除该图标后Android应用恢复正常。核心代码如下：

import {EvaIconsPack} from '@ui-kitten/eva-icons';

export default () => (
<>
  <IconRegistry icons={EvaIconsPack} />
  <ApplicationProvider {...eva} theme={{...eva.light, ...theme}}>
    <Layout style={styles.layout}>
      <Button accessoryLeft={<Icon name="facebook" />}>
        Login with Facebook
      </Button>
    </Layout>
  </ApplicationProvider>
</>
);

解决思路 #

• 验证图标名称有效性：确认"facebook"是EvaIconsPack包含的官方图标名称，部分图标存在跨平台命名差异，需核对UI Kitten图标清单。
• 清理Android构建缓存：
  1. 进入Android目录执行 cd android && ./gradlew clean
  2. 返回项目根目录重新编译运行 npx react-native run-android
• 排查依赖版本兼容性：确保@ui-kitten/components、@ui-kitten/eva-icons和react-native-svg版本匹配，版本不兼容是Android端图标渲染空指针的常见原因。
• 显式设置图标尺寸：给Icon组件添加size属性，例如 <Icon name="facebook" size={24} />，避免Android端因尺寸参数为空引发计算错误。
• 确认Icon组件导入正确性：确保Icon组件从@ui-kitten/components导入，错误的导入路径会导致图标注册失效，触发渲染异常。

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