PanResponder React Native 不适用于 Android

问题描述

我正在尝试在 React Native 中构建滑块，但我没有看到 panResponder 工作。我与 API docs 一起工作，但我无法弄清楚我错过了什么。 当我尝试移动步进器时，应用程序没有响应

技术：

react-native cli（没有博览会）

我的代码：

const App = () => {
  const [sliderDimensions,setSliderDimensions] = useState({
    height: null,top: null,bottom: null,});
  const stepperAnim = useRef(new Animated.Value(0)).current;
  const railFillAnim = useRef(new Animated.Value(0)).current;
  const stepperResponder = React.useRef(PanResponder.create({
    onStartShouldSetPanResponder: () => true,onPanResponderGrant: () => {
      stepperAnim.setoffset(stepperAnim._value);
      railFillAnim.setoffset(railFillAnim._value);
    },onPanResponderMove: (evt,{dy,moveY}) => {
      if (moveY > sliderDimensions.top && moveY < sliderDimensions.bottom) {
        stepperAnim.setValue(dy);
        railFillAnim.setValue(-dy);
      }
    },onPanResponderRelease: () => {
      stepperAnim.flattenOffset();
      railFillAnim.flattenOffset();
    },}));

  return (
    <SafeAreaView>
      <Text style={styles.title}>What's your height?</Text>
      <View
        style={styles.slider}
        onLayout={(evt) => {
          const {height,y} = evt.nativeEvent.layout;
          setSliderDimensions({
            height: height,top: y,bottom: y + height,});
        }}>
        <View style={styles.rail}>
          <Animated.View style={[styles.railFill,{height: railFillAnim}]}>
            {sliderDimensions.height
              ? Array.apply(
                  null,Array(Math.floor(sliderDimensions.height / 10)),).map((item,index) => (
                  <View
                    key={index}
                    style={[styles.railFillSpace,{bottom: index * 10}]}
                  />
                ))
              : null}
          </Animated.View>
        </View>
        <Animated.View
          {...stepperResponder.panHandlers}
          style={[
            styles.stepper,{
              transform: [{translateY: stepperAnim}],},]}
        />
      </View>
    </SafeAreaView>
  );
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）