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库兼容。幸运的是，自述文件Usage section上有一些很棒的例子。

还有一个great example on Snack

转换完它们后，您就可以将import用作普通常量。

编辑：

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

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

1 个答案: