javascript - 无法在自定义 React Native 组件中渲染 Svg 图标

Question

我在渲染通过自定义组件中的 prop 提供的图标时遇到问题。这是我的自定义组件:

import React from 'react';
import { View, Image, StyleSheet, Text } from 'react-native';

export class MoreIcon extends React.Component {
  render() {
    return(
        <View style={styles.topViewStyle}>
            <View style={styles.circleStyle}>
                <Image source={this.props.iconSource} style={styles.iconStyle} />
            </View>
            <Text style={styles.moreIconText}>{this.props.iconText}</Text>
        </View>
    );
  }
}

const styles = StyleSheet.create({
    topViewStyle: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    moreIconText: {
        fontSize: 12,
        fontWeight: 'bold',
        color: '#fff',
        lineHeight: 1.17,
        height: 14,
    },
    iconStyle: {
        width: 30,
        height: 30,
    },
    circleStyle: {
        width: 58,
        height: 58,
        borderRadius: 50,
        borderColor: 'rgba(255, 255, 255, 0.3)',
        borderWidth: 2,
    }
});

问题是，当我在组件中提供源属性时，如下所示:

<MoreIcon iconText='Home' iconSource={require('../../assets/icons/dashboard.svg')} />

圆圈中什么也没有显示，看起来像这样:

我做错了什么，我提供的 Prop 没有显示在 MoreIcon 选项卡中？ (路径正确仅供引用)

Answer 1

您需要将 SVG 转换为与 react-native-svg 兼容。图书馆。幸运的是，Usage section 上有一些很好的例子。自述文件。

还有一个great example on Snack

转换它们后，您将能够将它们作为普通常量导入。

编辑:

根据 Adam 下面的评论，使用 react-native-svg-uri现在，库似乎是解决 SVG 问题的更简单的方法。