无法使用react-native-svg-charts显示图标

时间:2018-05-18 16:50:16

标签: javascript reactjs react-native svg expo

我正在使用react-native-svg-charts创建图表,但我无法在图表上显示图像/图标。我看了几个例子,我不知道我做错了什么。我的代码基于我从examples repo得到的一个例子。

我从aws s3获取图像,我尝试获取图像并将其保存为临时文件,但也失败了。救命啊!

class AssetsPieChart extends Component {
	static propTypes = {
		data: arrayOf(object).isRequired,
	}

	render() {
		const { data } = this.props
		const randomColor = () => (`#${(Math.random() * 0xFFFFFF << 0).toString(16)}000000`.slice(0, 7))

		const pieData = data
		.filter(el => el.value > 0)
		.map((el, index) => ({
				value: el.value,
				svg: { fill: randomColor() },
				key: `pie-${index}`,
				icon: el.icon,
		}))

		return (
			<PieChart
				style={{ height: '100%' }}
				data={pieData}
				innerRadius={100}
				outerRadius={110}
				labelRadius={150}
				renderDecorator={({
					item,
					pieCentroid,
					labelCentroid,
					index,
				}) => (
					<G key={index}>
						<Line
							x1={labelCentroid[0]}
							y1={labelCentroid[1]}
							x2={pieCentroid[0]}
							y2={pieCentroid[1]}
							stroke={item.svg.fill}
						/>
						<Image
							source={{ uri: item.icon }}
							style={{ zIndex: 50 }}
							x={labelCentroid[0]}
							y={labelCentroid[1]}
						/>
						<Text
							alignmentBaseline="middle"
							textAnchor="middle"
							x={labelCentroid[0]}
							y={labelCentroid[1] - 30}
							dy={-10}
						>
							{item.value}
						</Text>
					</G>
				)}
			/>
		)
	}
}

0 个答案:

没有答案