React Native - Touchable and Victory Chart
问题描述:
我如何防止新闻事件被胜利图截取,而不是点击通过可触摸的父项?本质上,我希望能够点击图表上的任何位置并转到详细视图。最终,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>
答
您是否试过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
处理器,用来变异的实际数据,但我不明白为什么你不能用它来任何理由导航到详细信息屏幕。我不确定你需要的语法。
答
想到另一种方法。尝试在VictoryChart之后添加第二个不可见视图。我将它称为InvisibleView。将VictoryChart和InvisibleView都放在父视图中,使InvisibleView可以像这样触摸...
const InvisibleView =() => <View style={StyleSheet.absoluteFill} />/
<View>
<VictoryChart ...>
<TouchableOpacity...>
<InvisibleView />
</TouchableOpacity>
</View>
这似乎不是我所期待的。事件支持让我可以拦截图表上的一个接触点,但是我最终计划除了我的触摸点之外还有更多的元素,所以我正在寻找那个级别的事件。 – linzlu