victory-native 的图表使用

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' }}
```
 <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'
   ]}
 />
```
</Svg>
适配的最终解决方案
其外层的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' }}
```
 {this.props.chart}
```
</Svg>
)
}
}
}

victory-native 的图表使用

推荐阅读更多精彩内容