我正在尝试实现多点触控滑块功能（基于 React Native Gesture Handler 提供的示例代码）。
我发现当我创建两个TapOrPan组件时，它们单独工作正常，但同时触摸两个滑块时共享滑块状态。
鉴于我使用了两个单独的组件，为什么会发生这种情况？我错过了什么？
用于调试的博览会链接：https ://snack.expo.io/aPLAoFWar
import React, { Component } from 'react';
import { Animated, Dimensions, StyleSheet, Text, View } from 'react-native';
import {
PanGestureHandler,
TapGestureHandler,
ScrollView,
State,
} from 'react-native-gesture-handler';
export function TapOrPan({width, radius}) {
const tapRef = React.createRef();
const panRef = React.createRef();
const _id = parseInt(Math.random() * 100);
const _touchX = new Animated.Value(width / 2 - radius);
const _circleValue = new Animated.Value(-radius);
const _translateX = Animated.add(_touchX, _circleValue);
const _onPanGestureEvent = Animated.event(
[{nativeEvent: {x: _touchX}}],
{useNativeDriver: true}
);
const styles = StyleSheet.create({
horizontalPan: {
backgroundColor: '#777',
height: 120,
justifyContent: 'center',
marginVertical: 10,
},
circle: {
backgroundColor: '#fff',
borderRadius: radius,
height: radius * 2,
width: radius * 2,
},
wrapper: {
flex: 1,
},
});
function _onTapHandlerStateChange({ nativeEvent }) {
console.log(_id.toString() + ": " + JSON.stringify(nativeEvent));
if (nativeEvent.oldState === State.ACTIVE) {
// Once tap happened we set the position of the circle under the tapped spot
_touchX.setValue(nativeEvent.x);
}
}
return (
<TapGestureHandler
ref={tapRef}
onHandlerStateChange={_onTapHandlerStateChange}
>
<Animated.View style={styles.wrapper}>
<PanGestureHandler
ref={panRef}
activeOffsetX={[0, 0]}
onGestureEvent={_onPanGestureEvent}
>
<Animated.View style={styles.horizontalPan}>
<Animated.View
style={[
styles.circle,
{transform: [{translateX: _translateX}]},
]}
/>
</Animated.View>
</PanGestureHandler>
</Animated.View>
</TapGestureHandler>
);
}
export default function Example() {
const windowWidth = Dimensions.get('window').width;
return (
<ScrollView>
<TapOrPan width={windowWidth} radius={30} />
<TapOrPan width={windowWidth} radius={30} />
</ScrollView>
);
}