React Native - 可触摸和胜利图表答案

【问题标题】：React Native - Touchable and Victory ChartReact Native - 可触摸和胜利图表
【发布时间】：2017-10-22 01:46:33
【问题描述】：

如何防止新闻事件被胜利图表拦截，而是“点击”到可触摸的父级？本质上，我希望能够单击图表上的任意位置并转到详细视图。最终在 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>

【问题讨论】：

标签： javascript events react-native touchableopacity victory-charts

【解决方案1】：

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

【讨论】：

【解决方案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 处理程序，它用于改变实际数据，但我看不出有什么理由不能使用它导航到详细信息屏幕。我不确定您需要的语法。

【讨论】：

这似乎不是我想要的。 events 道具让我可以拦截图表上的触摸，但我最终计划在我的可触摸对象中添加更多元素，而不仅仅是图表，因此我正在寻找在该级别捕获事件。

【解决方案3】：

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

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

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

【讨论】：