如何解决React Native 使用 PanResponder API 获取 Touched 组件
我正在尝试选择平移组件内的多个元素。我搜索了很多,现在我可以得到滚动坐标,但是有了这个 x 和 y 坐标值,我无法理解选择了哪个。
HourComponent.js(如此简单只有一个文本)
<View
height={35}
marginVertical={8}
width={Dimensions.get("window").width / 3 }
borderRadius={10}
alignItems="center"
justifyContent="center"
bg={this.props.isSelected ? "green" : "#F0F2F6"}
marginHorizontal={6}
>
<Text>{this.props.hourText}</Text>
</View>;
构造函数
constructor(props) {
super(props);
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt,gestureState) => true,onMoveShouldSetPanResponder: (evt,onPanResponderMove: (event,gesture) => {
var witdh = 110;// I find that with console.log,the component Box sizes
var height = 30;
var x = gesture.moveX / witdh;
var y = gesture.moveY / height;
console.log('gesture.moveY',gesture.moveY);
console.log('x: ' + x + ' y: ' + y);
},});
this.state = {
hours: [
{isSelected: false,hourText: '10:00'},{isSelected: false,hourText: '10:20'},hourText: '10:40'},hourText: '11:00'},hourText: '11:20'},hourText: '11:40'},hourText: '12:00'},hourText: '12:20'},hourText: '12:40'},],panResponder,};
}
在渲染部分
<Box
flex={1}
mt={20}
alignItems={"flex-start"}
justifyContent={"center"}
flexDirection={"row"}
flexWrap={"wrap"}
flexDirection="row"
>
{this.state.hours.map((hours,index) => {
return (
<View
style={{
backgroundColor: "red",}}
{...this.state.panResponder.panHandlers}
>
<TouchableOpacity
style={{ backgroundColor: "blue" }}
onPress={() => {
this.hourSelect(hours,index);
}}
>
<HoursComponent
hoursText={hours.hoursText}
isSelected={hours.isSelected}
hours={hours}
/>
</TouchableOpacity>
</View>
);
})}
</Box>;
我的问题是如何获取选定的组件。我无法使用坐标来制作它。谢谢
我无法获得选定的值,只能获得坐标 我还是有这个问题
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。