点亮微端！教你手把手用React Native打造Slider

前言

React Native是一个流行的跨平台移动应用开发框架，它允许你使用JavaScript和React来构建iOS和Android应用。PanResponder是React Native中一个强大的工具，它可以让你轻松创建复杂的滑块控件。

效果展示

[图片：React Native中使用PanResponder实现的三点式滑块]

使用

1. 安装依赖

npm install react-native-panresponder

2. 导入库

import { PanResponder, View, Text } from 'react-native';

3. 创建Slider组件

const Slider = (props) => {
  const { onValueChange, minValue, maxValue, initialValue } = props;

  // 创建一个PanResponder对象
  const panResponder = PanResponder.create({
    // 当手指按下时触发
    onStartShouldSetPanResponder: (evt, gestureState) => true,

    // 当手指在屏幕上移动时触发
    onPanResponderMove: (evt, gestureState) => {
      // 计算滑块的新值
      const newValue = Math.min(maxValue, Math.max(minValue, initialValue + gestureState.dx));

      // 调用onValueChange回调函数，通知父组件滑块的值发生了变化
      onValueChange(newValue);
    },

    // 当手指抬起或取消时触发
    onPanResponderRelease: (evt, gestureState) => {
      // 停止拖动动画
      Animated.timing(animatedValue, {
        toValue: newValue,
        duration: 200,
      }).start();
    },
  });

  // 创建一个Animated值，用于控制滑块的动画
  const animatedValue = new Animated.Value(initialValue);

  return (
    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
      {/* 左侧文本 */}
      <Text style={{ fontSize: 20, marginRight: 10 }}>{minValue}</Text>

      {/* 滑块 */}
      <Animated.View
        {...panResponder.panHandlers}
        style={{
          width: 200,
          height: 20,
          backgroundColor: 'blue',
          transform: [{ translateX: animatedValue }],
        }}
      />

      {/* 右侧文本 */}
      <Text style={{ fontSize: 20, marginLeft: 10 }}>{maxValue}</Text>
    </View>
  );
};

4. 使用Slider组件

export default function App() {
  const [value, setValue] = useState(0);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {/* Slider组件 */}
      <Slider
        minValue={0}
        maxValue={100}
        initialValue={50}
        onValueChange={(newValue) => setValue(newValue)}
      />

      {/* 显示滑块的值 */}
      <Text style={{ fontSize: 20, marginTop: 20 }}>Value: {value}</Text>
    </View>
  );
}

完整代码

import { PanResponder, View, Text, Animated } from 'react-native';

const Slider = (props) => {
  const { onValueChange, minValue, maxValue, initialValue } = props;

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => true,
    onPanResponderMove: (evt, gestureState) => {
      const newValue = Math.min(maxValue, Math.max(minValue, initialValue + gestureState.dx));
      onValueChange(newValue);
    },
    onPanResponderRelease: (evt, gestureState) => {
      Animated.timing(animatedValue, {
        toValue: newValue,
        duration: 200,
      }).start();
    },
  });

  const animatedValue = new Animated.Value(initialValue);

  return (
    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, marginRight: 10 }}>{minValue}</Text>
      <Animated.View
        {...panResponder.panHandlers}
        style={{
          width: 200,
          height: 20,
          backgroundColor: 'blue',
          transform: [{ translateX: animatedValue }],
        }}
      />
      <Text style={{ fontSize: 20, marginLeft: 10 }}>{maxValue}</Text>
    </View>
  );
};

export default function App() {
  const [value, setValue] = useState(0);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Slider
        minValue={0}
        maxValue={100}
        initialValue={50}
        onValueChange={(newValue) => setValue(newValue)}
      />
      <Text style={{ fontSize: 20, marginTop: 20 }}>Value: {value}</Text>
    </View>
  );
}

使用react native 滑动价格区间 拖动动画支持

1. 实现自定义的拖动滑块

自定义一个组件，包括两个滑块，一个范围显示区域和拖动动画。

2. 利用PanResponder实现拖动

使用PanResponder监听手指移动事件，并通过setState更新滑块的位置。

3. 实现范围显示区域

在两个滑块之间显示一个区域，用来显示选定的价格范围。

4. 实现拖动动画

使用Animated API实现拖动动画，让滑块在移动时平滑过渡。

5. 集成到你的应用中

将自定义的拖动滑块组件集成到你的应用中，并使用它来选择价格范围。