Question

我正在尝试实现Victor条形图，当用户单击条形图时，我想在其中执行一些操作。但是在使用文档中提供的事件道具时（使用docs中给出的示例代码）却没有触发该事件。您也可以使用此链接在点心.expo.io上查看我的实现... 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",

这是相同的代码供您参考...

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

请帮助我

Answer 1

尝试将VictoryBar包装在VictoryChart内。像这样的TouchableOpacity里面的VictoryChart

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

Answer 2

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

Answer 3

在我的情况下，使用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

Answer 4

如果只用一个词，事件将像文档一样正常。

Uncaught FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

victory-native：使用胜利条形图时，事件道具无法在反应本机中起作用/事件不在激发本机中

4 个答案: