Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Component SwitchSelector trong React Native

SwitchSelector** (react-native-switch-selector) là component cho phép chọn **một trong nhiều options** dưới dạng segmented control / toggle button group. Phù hợp cho: giới tính, tab filter, sorting options, language selector.

Cài đặt

npm install react-native-switch-selector

Import

import SwitchSelector from 'react-native-switch-selector';

Cú pháp cơ bản

<SwitchSelector
  options={[
    { label: 'Nam', value: 'm', imageIcon: maleImg },
    { label: 'Nữ', value: 'f', imageIcon: femaleImg },
  ]}
  initial={0}
  onPress={value => console.log('Selected:', value)}
  selectedColor="#7a44cf"
  buttonColor="#ccc"
  borderColor="#ccc"
  textColor="#888"
  hasPadding
/>

Props chính

PropKiểuMô tả
optionsarray**Bắt buộc**. Mảng object: { label, value, imageIcon? }.
initialnumberIndex option mặc định chọn (mặc định 0).
onPressfuncCallback: (value) => void. value là value của option được chọn.
selectedColorstringMàu text/icon khi được chọn.
buttonColorstringMàu nền của option được chọn.
textColorstringMàu text/icon khi KHÔNG được chọn.
backgroundColorstringMàu nền container.
borderColorstringMàu viền container.
fontSizenumber/stringKích thước font label.
hasPaddingbooleanThêm padding cho container.
disabledbooleanVô hiệu hóa toàn bộ.

Ví dụ 1: Chọn giới tính (có icon)

import React, { Component } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import SwitchSelector from 'react-native-switch-selector';

// Giả sử có file ảnh local
// const male = require('./assets/male.png');
// const female = require('./assets/female.png');
// Hoặc dùng URI:
// const male = { uri: 'https://example.com/male.png' };

const images = {
  female: require('./assets/female.png'),
  male: require('./assets/male.png'),
};

const options = [
  { label: 'Nữ', value: 'f', imageIcon: images.female },
  { label: 'Nam', value: 'm', imageIcon: images.male },
];

export default class MySwitchSelectorComponent extends Component {
  state = { gender: 'f' };

  render() {
    return (
      
         this.setState({ gender: value })}
          textColor="#888"
          selectedColor="#7a44cf"
          buttonColor="#f0f0f0"
          borderColor="#ddd"
          hasPadding
          options={options}
        />
      
    );
  }
}

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

Ví dụ 2: 3 options chỉ text (Sort/Filter)

import React, { Component } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import SwitchSelector from 'react-native-switch-selector';

const options = [
  { label: 'Mới nhất', value: 'newest' },
  { label: 'Phổ biến', value: 'popular' },
  { label: 'Giá thấp', value: 'price_asc' },
];

export default class SortSelector extends Component {
  state = { sort: 'newest' };

  render() {
    return (
      
         this.setState({ sort: value })}
          textColor="#666"
          selectedColor="#fff"
          buttonColor="#007AFF"
          borderColor="#007AFF"
          fontSize={14}
          hasPadding
          options={options}
        />
      
    );
  }
}

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

Ví dụ 3: Dùng với Functional Component & Hooks

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import SwitchSelector from 'react-native-switch-selector';

const LanguageSelector = () => {
  const [lang, setLang] = useState('vi');
  const options = [
    { label: 'Tiếng Việt', value: 'vi' },
    { label: 'English', value: 'en' },
    { label: '中文', value: 'zh' },
  ];

  return (
    
       o.value === lang)}
        onPress={setLang}
        selectedColor="#fff"
        buttonColor="#007AFF"
        borderColor="#007AFF"
        textColor="#007AFF"
        fontSize={15}
        hasPadding
        options={options}
      />
    
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
});

export default LanguageSelector;

Lưu ý & Hạn chế

  • Thư viện này ít được maintain gần đây (check GitHub trước khi dùng production).
  • Không hỗ trợ RTL tốt.
  • Khó tùy biến UI sâu (radius, shadow, animation).
  • Alternative hiện đại: Dựng custom bằng Pressable + Animated hoặc dùng @shopify/react-native-skia, react-native-segmented-control-tab, react-native-tab-view (cho tab).