我在渲染通过自定义组件中的 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
选项卡中? (路径正确仅供引用)
最佳答案
您需要将 SVG 转换为与 react-native-svg 兼容。图书馆。幸运的是,Usage section 上有一些很好的例子。自述文件。
转换它们后,您将能够将它们作为普通常量导入
。
编辑:
根据 Adam 下面的评论,使用 react-native-svg-uri
现在,库似乎是解决 SVG 问题的更简单的方法。
关于javascript - 无法在自定义 React Native 组件中渲染 Svg 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53159115/