我正在使用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>
)}
/>
)
}
}