React Native导入JSX格式图标报错问题求助

问题说明 #

将SVG转为JSX组件后导入React Native项目，出现报错：View config getter callback for component 'path' must be a function (received 'undefined'). Make sure to start component names with a capital letter，即使组件名首字母大写仍无法解决。

相关代码如下：

MainLogo组件 #

import React from "react";

export default function MainLogo() {
return (
    <svg
    xmlns="http://www.w3.org/2000/svg"
    width="266.667"
    height="266.667"
    version="1"
    viewBox="0 0 200 200"
    >
    <path
        d="M830 1000V210h50v1580h-50v-790zM970 1000V480h50v1040h-50v-520zM550 1000V760h50v480h-50v-240zM690 1000V760h50v480h-50v-240zM1110 1005V770h50v470h-50v-235zM1250 1005V770h50v470h-50v-235zM1390 1005V770h50v470h-50v-235z"
        transform="matrix(.1 0 0 -.1 0 200)"
    ></path>
    </svg>
);
}

导入组件的FirstHomepage代码 #

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MainLogo from '../../logos/mainLogo.jsx';

export default function FirstHomepage() {
  return (
    <View style={styles.container}>
      
      <View style={styles.firstBackGround}>
        <View style={styles.homeLogoContainer}>
          <MainLogo />
          <Text style={styles.libraryText}>LIBRARY</Text> 
        </View>
      </View>
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {  
  },
  firstBackGround: {
    height:'47%',
  },
  libraryText: {
    fontSize:25,
    marginLeft:15,
    fontWeight:'bold',
    color:'rgb(108, 150, 232)',
  },
  homeLogoContainer:{
    flex:1,
    alignItems:'center',
    flexDirection:'row',
    marginLeft: 10,
  }
});

解决方法 #

React Native原生不支持<svg>和<path>这类Web SVG标签，必须借助react-native-svg库实现SVG渲染，步骤如下：

1. 安装依赖

   • Expo项目执行：

     expo install react-native-svg
     

   • 原生React Native项目执行：

     # 使用npm
     npm install react-native-svg
     # 或使用yarn
     yarn add react-native-svg
     

   原生项目需额外在iOS目录执行pod install

2. 修改MainLogo组件
   导入react-native-svg提供的Svg和Path组件，替换原Web SVG标签：

   import React from "react";
   import { Svg, Path } from 'react-native-svg';
   
   export default function MainLogo() {
     return (
       <Svg
         width="266.667"
         height="266.667"
         viewBox="0 0 200 200"
       >
         <Path
           d="M830 1000V210h50v1580h-50v-790zM970 1000V480h50v1040h-50v-520zM550 1000V760h50v480h-50v-240zM690 1000V760h50v480h-50v-240zM1110 1005V770h50v470h-50v-235zM1250 1005V770h50v470h-50v-235zM1390 1005V770h50v470h-50v-235z"
           transform="matrix(0.1 0 0 -0.1 0 200)"
         />
       </Svg>
     );
   }
   

3. 验证效果
   重新运行项目，<MainLogo>组件即可正常渲染，报错消失。

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