Question

如何阻止新闻事件被胜利图表截获，而是“点击”到可触摸的父母？基本上我希望能够点击图表上的任何位置并转到详细视图。最终touchableOpacity元素中会有其他元素，所以我不想直接捕获图表上的印刷机。

我为可怜的措辞道歉，我对React和React Native很新。

  <TouchableOpacity
    style={styles.panel}
    onPress={this.handleSubmit.bind(this)}>
    <VictoryChart>
      <VictoryBar
        style={{
          data: {fill: "blue"}
        }}
        data={data}
        x="quarter"
        y="earnings"
      />
    </VictoryChart>
  </TouchableOpacity>

Answer 1

已回答here。如链接中所述，将containerComponent道具添加到VictoryChart组件中，将在单击时在TouchableOpacity中调用onPress函数。

Answer 2

你试过events道具吗？ Read about it here

文档显示了这个例子......

events={[{
    childName: "all",
    target: "data",
    eventHandlers: {
      onClick: () => {
        return [
          {
            childName: "area-2",
            target: "data",
            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "gold" }) })
          }, {
            childName: "area-3",
            target: "data",
            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "orange" }) })
          }, {
            childName: "area-4",
            target: "data",
            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: "red" }) })
          }
        ];
      }
    }
  }]
}

这显示了一个onClick处理程序，用于改变实际数据，但我没有看到任何原因导致您无法使用它来导航到详细信息屏幕。我不确定你需要的语法。

Answer 3

想到另一种方法。尝试在VictoryChart之后添加第二个不可见的视图。我称之为InvisibleView。在父视图中粘贴VictoryChart和InvisibleView，使InvisibleView可以像这样触摸......

const InvisibleView = () => <View style={StyleSheet.absoluteFill} />/

<View>
    <VictoryChart ...>
    <TouchableOpacity...>
        <InvisibleView />
    </TouchableOpacity>
</View>

React Native - Touchable和Victory Chart

3 个答案: