React Native使用SVG作为按钮组件时出现类型无效警告，求解决

这个错误的核心原因是：你直接将SVG文件当作React组件导入使用，但在React Native中，默认导入SVG文件得到的是资源ID（数字类型），而非可渲染的React组件，这就触发了"type is invalid"的警告。

解决步骤： #

1. 安装必要依赖
   需要安装处理SVG的库，在项目根目录执行：

   npm install react-native-svg
   npm install --save-dev react-native-svg-transformer
   

2. 配置Metro打包器
   修改项目根目录的metro.config.js（如果没有就新建），添加SVG转换规则：

   const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
   
   const config = {};
   
   module.exports = mergeConfig(getDefaultConfig(__dirname), {
     transformer: {
       babelTransformerPath: require.resolve('react-native-svg-transformer'),
     },
     resolver: {
       assetExts: getDefaultConfig(__dirname).resolver.assetExts.filter(ext => ext !== 'svg'),
       sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'svg'],
     },
   });
   

3. 正确导入并使用SVG组件
   现在你可以像之前一样导入SVG，但此时它已经是一个React组件了，注意补充闭合标签：

   import Buttonicon from "../assets/buttonicon.svg";
   
   // 在组件中使用
   <Buttonicon
     style={[styles.buttonicon, styles.icon25Layout]}
     width={24}
     height={24}
   />
   

如果需要把这个SVG作为按钮使用，用TouchableOpacity或Pressable包裹它即可添加点击逻辑：

import { TouchableOpacity } from 'react-native';

<TouchableOpacity onPress={() => console.log('按钮被点击')}>
  <Buttonicon
    style={[styles.buttonicon, styles.icon25Layout]}
    width={24}
    height={24}
  />
</TouchableOpacity>

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