React Native - Touchable and Victory Chart

Question

プレスイベントがVictory Chartによって傍受されず、タッチ可能な親に「クリックスルー」されないようにするにはどうすればよいですか？基本的には、グラフのどこかをクリックして詳細ビューに移動したいと思っています。最終的にtouchableOpacity要素内には他の要素が存在するため、チャート上で直接印刷することは望ましくありません。

貧弱な言い回しについてお詫び申し上げますが、私はReact and 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

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 2

もう1つのアプローチを考えました。 VictoryChartの後に2番目の目に見えないビューを追加してみてください。私はそれをInvisibleViewと呼ぶでしょう。 VictoryChartとInvisibleViewの両方を親ビューに固定して、InvisibleViewをこのようにタッチできるようにします。

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

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