Reactjs victory native：使用victory条形图时，事件道具不在react native中工作/事件不在react native中触发

我正在尝试实现Victor条形图，在其中，当用户单击条形图时，我希望执行一些操作。但当使用文档中给出的事件道具（使用中给出的相同示例代码）执行此操作时，事件不会触发。 您还可以使用此链接在snack.expo.io上看到我的实现

软件包版本为：

"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",

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

注意：我还使用了“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" }
             }
           }];
         }
       }
     }
   ]}
 />

{
返回[{
目标：“标签”，
突变：（道具）=>{
return props.text===“已单击”？
空：{text:“已单击”}
}
}];
}
}
}
]}
/>

---

请帮我解决问题

如果你用一个词来做这件事，事件将像文档一样正常

{
返回[
{
突变：（道具）=>{
return props.text===“已单击”？
空：{text:“已单击”}
}
}
];
}
}
}]}
/>

如果您使用word执行此操作，事件将像文档一样正常运行

{
返回[
{
突变：（道具）=>{
return props.text===“已单击”？
空：{text:“已单击”}
}
}
];
}
}
}]}
/>

尝试将VictoryBar包装在VictoryChart中。里面的VictoryChart就是这样的

<TouchableOpacity onPress={...}>
    <VictoryChart containerComponent={<VictoryContainer disableContainerEvents />}
   ...>
       <VictoryBar
        ... />
    </VictoryChart>
</TouchableOpacity>

---

尝试将VictoryBar包装在VictoryChart中。里面的VictoryChart就是这样的

<TouchableOpacity onPress={...}>
    <VictoryChart containerComponent={<VictoryContainer disableContainerEvents />}
   ...>
       <VictoryBar
        ... />
    </VictoryChart>
</TouchableOpacity>

---

在svg下包装它对我来说是这样的

          <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> 

({
突变：（）=>null
}),
加压素：（）=>{
返回[
{
目标：“数据”，
突变：（道具）=>{
this.changeData（props.index）
})  
}
}
];
}
}
}]}
/>

在svg下包装它对我来说是这样的

          <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> 

({
突变：（）=>null
}),
加压素：（）=>{
返回[
{
目标：“数据”，
突变：（道具）=>{
this.changeData（props.index）
})  
}
}
];
}
}
}]}
/>

在我的例子中，使用TouchableOpacity包装图表仅适用于ios，使用svg包装图表适用于android。所以我只需要根据平台切换包装器

const ChartClick=Platform.select({
      ios: TouchableOpacity,
      android: Svg
    });

我用这个作为

<ChartClick>
 <VictoryChart>
 </VictoryChart>
</ChartClick>

---

我的软件包版本是：react native svg:9.0.0，victory native:34.0.0

在我的例子中，使用TouchableOpacity包装图表仅适用于ios，使用svg包装适用于android。所以我只需要根据平台切换包装器

const ChartClick=Platform.select({
      ios: TouchableOpacity,
      android: Svg
    });

我用这个作为

<ChartClick>
 <VictoryChart>
 </VictoryChart>
</ChartClick>

---

我的软件包版本是：react native svg:9.0.0，victory native:34.0.0。你想在零食中运行代码吗？我在零食中试过了。您想在零食中运行代码吗？