0

어떻게하면 프리 롤 이벤트가 승리 차트에 가로 채지 않고 터치 가능한 상위 플레이어에게 '클릭 연결'하지 못하게 할 수 있습니까? 본질적으로 차트의 아무 곳이나 클릭하여 세부 정보보기로 이동할 수 있기를 원합니다. 결국에는 touchableOpacity 요소 안에 다른 요소가 있으므로 차트에서 직접 프레스를 캡처하고 싶지는 않습니다.React 네이티브 - 터치 가능 및 승리 차트

가난한 말씨에 대해 사과드립니다. 저는 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> 

답변

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>