- android 下面遇到bug，饼图的项点击事件不响应。
具体可见https://github.com/FormidableLabs/victory-native/issues/96
的解决方案。原先的代码，在ios下可正常工作。
原先代码如下:
<VictoryPie
// events={[
// {
// target: 'data',
// eventHandlers: {
// onClick: this.onSliceClick
// }
// }
// ]}
events={[
{
target: 'data',
eventHandlers: {
onPress: () => {
alert('onclick')
}
}
}
]}
style={{
labels: {
fill: 'white',
stroke: 'none',
fontSize: 15,
fontWeight: 'bold'
}
}}
data={[
{ x: '<5', y: 6279 },
{ x: '5-13', y: 9182 },
{ x: '14-17', y: 5511 },
{ x: '18-24', y: 7164 },
{ x: '25-44', y: 6716 },
{ x: '45-64', y: 4263 },
{ x: '≥65', y: 7502 }
]}
innerRadius={70}
labelRadius={100}
colorScale={[
'#D85F49',
'#F66D3B',
'#D92E1D',
'#D73C4C',
'#FFAF59',
'#E28300',
'#F6A57F'
]}
/>
解决后代码如下:
在原有的VictoryPie外层包一层Svg标签即可解决，后可响应点击事件了。
import Svg from 'react-native-svg'
<Svg
width={400}
height={400}
viewBox="0 0 400 400"
style={{ width: '100%', height: 'auto' }}
</Svg><VictoryPie // events={[ // { // target: 'data', // eventHandlers: { // onClick: this.onSliceClick // } // } // ]} events={[ { target: 'data', eventHandlers: { onPress: () => { alert('onclick') } } } ]} style={{ labels: { fill: 'white', stroke: 'none', fontSize: 15, fontWeight: 'bold' } }} data={[ { x: '<5', y: 6279 }, { x: '5-13', y: 9182 }, { x: '14-17', y: 5511 }, { x: '18-24', y: 7164 }, { x: '25-44', y: 6716 }, { x: '45-64', y: 4263 }, { x: '≥65', y: 7502 } ]} innerRadius={70} labelRadius={100} colorScale={[ '#D85F49', '#F66D3B', '#D92E1D', '#D73C4C', '#FFAF59', '#E28300', '#F6A57F' ]} /> - 适配的最终解决方案
其外层的chart通过props传进来。
export default class ChartContainter extends React.Component {
constructor (props) {
super(props)
}
render () {
if (Platform.OS == 'ios') {
return (
<View>
{this.props.chart}
</View>
)
} else if (Platform.OS == 'android') {
return (
<Svg
width={this.props.width}
height={this.props.height}
viewBox={'0 0 ' + this.props.width + ' ' + this.props.height}
style={{ width: '100%', height: 'auto' }}
</Svg>{this.props.chart}
)
}
}
}
网友评论