0

我如何防止新聞事件被勝利圖截取,而不是點擊通過可觸摸的父項?本質上,我希望能夠點擊圖表上的任何位置並轉到詳細視圖。最終,touchableOpacity元素中還會有其他元素,所以我不想直接在圖表上捕獲新聞。React Native - Touchable and Victory Chart

我對可憐的措辭表示歉意,我對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> 

回答

0

您是否試過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處理器,用來變異的實際數據,但我不明白爲什麼你不能用它來任何理由導航到詳細信息屏幕。我不確定你需要的語法。

+0

這似乎不是我所期待的。事件支持讓我可以攔截圖表上的一個接觸點,但是我最終計劃除了我的觸摸點之外還有更多的元素,所以我正在尋找那個級別的事件。 – linzlu

0

想到另一種方法。嘗試在VictoryChart之後添加第二個不可見視圖。我將它稱爲InvisibleView。將VictoryChart和InvisibleView都放在父視圖中,使InvisibleView可以像這樣觸摸...

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

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