无法在自定义React Native组件中呈现Svg图标

Question

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

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,
    }
});

问题是，当我在这样的组件中提供source属性时：

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

圆圈中没有任何内容，看起来像这样：

我所提供的道具未显示在MoreIcon选项卡中的地方，我在做什么错？ （路径正确）

Answer 1

您需要将SVG转换为与react-native-svg库兼容。 幸运的是，自述文件的“ 用法”部分有一些很好的示例。

小吃上也有很好的例子

转换它们之后，就可以import它们作为普通常数import 。

编辑：

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