胜利本机：使用胜利条形图时，事件props在本机react中不起作用/事件在本机react中未触发

IT技术 reactjs react-native victory-charts
2021-05-20 05:29:37

我正在尝试实现 Victor 条形图，当用户单击条形图时，我想在其中执行一些操作。但是，当这样做的使用，其在文档给定事件的props（使用中给出的相同的示例代码文档），但该事件不点火。您还可以使用此链接在snack.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" }
             }
           }];
         }
       }
     }
   ]}
 />

请帮帮我

4个回答

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

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

Svg像这样包装它对我有用：

<Svg>
  <VictoryPie
    height={280}
    colorScale={pie_chart_color}
    data={this.state.data}
    style={...}
    events={[...]}
  />
</Svg>

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

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

<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: {
      onPress: () => {
        return [
          {
            mutation: (props) => {
              return props.text === "clicked" ?
                null : { text: "clicked" }
            }
          }
        ];
      }
    }
  }]}
/>
其它你可能感兴趣的问题
上一篇react传单地图不更新 下一篇react加载 HOC：列表中提供的所有props都设置为可选，如果其中任何一个未定义，则显示微调器而不是组件