Tạo slider component trong React Native bằng PanResponder

Tạo một Slider component trong React Native bằng cách sử dụng PanResponder là một cách tuyệt vời để học cách xử lý các cử chỉ người dùng trong ứng dụng di động. PanResponder cho phép bạn nắm bắt và phản ứng với các sự kiện vuốt và kéo của người dùng. Dưới đây là một ví dụ đơn giản về cách bạn có thể tạo một slider component bằng PanResponder.

Tạo Slider Component

Tạo một tệp mới với tên Slider.js trong thư mục dự án của bạn và sao chép đoạn mã dưới đây vào:

import React, { useState, useRef } from 'react';
import { View, Animated, PanResponder, StyleSheet } from 'react-native';

const Slider = ({ width = 300, height = 40 }) => {
  const [position, setPosition] = useState(new Animated.Value(0));
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        position.setOffset(position._value);
        position.setValue(0);
      },
      onPanResponderMove: Animated.event(
        [null, { dx: position }],
        { useNativeDriver: false }
      ),
      onPanResponderRelease: () => {
        position.flattenOffset();
      },
    })
  ).current;

  const sliderWidth = width - height;

  return (
    <View style={[styles.container, { width, height }]}>
      <View style={styles.track} />
      <Animated.View
        {...panResponder.panHandlers}
        style={[
          styles.thumb,
          {
            transform: [
              {
                translateX: position.interpolate({
                  inputRange: [0, sliderWidth],
                  outputRange: [0, sliderWidth],
                  extrapolate: 'clamp',
                }),
              },
            ],
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    backgroundColor: '#ddd',
    borderRadius: 20,
    overflow: 'hidden',
  },
  track: {
    height: 4,
    backgroundColor: '#888',
    position: 'absolute',
    left: 0,
    right: 0,
  },
  thumb: {
    width: 40,
    height: 40,
    backgroundColor: '#FFF',
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#888',
    position: 'absolute',
  },
});

export default Slider;

Sử dụng Slider Component trong Ứng Dụng

Trong tệp chính của bạn (ví dụ: App.js), bạn có thể sử dụng Slider component như sau:

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import Slider from './Slider';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Slider />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Giải Thích và Tinh Chỉnh

PanResponder.create: Đây là cách bạn tạo một PanResponder mới. Nó có nhiều sự kiện khác nhau để lắng nghe các cử chỉ của người dùng.
Animated.Value: Đây là giá trị động mà bạn có thể thay đổi và liên kết với các thuộc tính của các thành phần khác.
onPanResponderMove: Sự kiện này được kích hoạt khi người dùng di chuyển ngón tay của họ. Trong trường hợp này, chúng ta sử dụng Animated.event để di chuyển thumb của slider theo ngón tay.
interpolate: Chúng ta sử dụng interpolate để đảm bảo giá trị của slider nằm trong phạm vi cho phép.

Bạn đã tạo thành công một Slider component đơn giản trong React Native bằng cách sử dụng PanResponder. Bạn có thể tùy chỉnh thêm component này để phù hợp với nhu cầu của ứng dụng của mình, chẳng hạn như thay đổi màu sắc, thêm nhãn giá trị, hoặc kết hợp với các logic khác trong ứng dụng.

Xem thêm các việc làm React Native hấp dẫn tại TopDev