胜利本机:使用胜利条形图时，事件道具在本机反应中不起作用/事件在本机反应中未触发 [英] victory-native : events props not working in react native / event not firing in react native when using victory bar chart

问题描述

我正在尝试实现 Victor 条形图，当用户单击条形图时，我想在其中执行一些操作.但是当使用文档中给出的事件道具时(使用 docs) 但事件没有触发.您还可以使用此链接查看我在snack.expo.io 上的实现...ClickMe

I am trying to implement Victor bar chart in which I want to perform some action when user click on the bar. but when do so using event props which in given in the docs(using the same sample code given in docs) but the event is not firing. You can also see my implementation on snack.expo.io using this link...ClickMe

软件包版本为:

"react-native-svg": "^9.4.0",
"victory-native": "^32.0.2",
"expo": "^33.0.0",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",

这里有相同的代码供您参考...

here is same code for your reference...

注意: 我还使用了onPressIn"、onClick"和onPress"，它们都不起作用.

<VictoryBar
   data={[
     {x: 1, y: 2, label: "A"},
     {x: 2, y: 4, label: "B"},
     {x: 3, y: 7, label: "C"},
     {x: 4, y: 3, label: "D"},
     {x: 5, y: 5, label: "E"},
   ]}
   events={[
     {
       target: "data",
       eventHandlers: {
         onPressIn: () => {
           return [{
             target: "labels",
             mutation: (props) => {
               return props.text === "clicked" ?
                 null : { text: "clicked" }
             }
           }];
         }
       }
     }
   ]}
 />

请帮帮我

推荐答案

在 svg 下包装它像这样对我有用...

Wrapping under svg it worked for me like this...

          <Svg>
           <VictoryPie
              height={280}
              colorScale={pie_chart_color}
              data={this.state.data}
              style={{ labels: { fill: "white", fontSize: 10, fontWeight: "bold" } }}
              events={[{
                target: "data",
                eventHandlers: {
                  onPressOut: () => ({
                    mutation: () => null
                  }),
                  onPressIn: () => {
                    return [
                      {
                        target: "data",
                        mutation: (props) => { <VictoryLabel
                          textAnchor="middle"
                          style={{ fontSize: 20,fill:'red' }} 
                        />
                          this.changeData(props.index)
                          })  
                        }
                      }
                    ];
                  }
                }
              }]}
          />

         </Svg> 

这篇关于胜利本机:使用胜利条形图时，事件道具在本机反应中不起作用/事件在本机反应中未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！