คอมโพเนนต์ SwitchSelector ใน React Native

SwitchSelector คล้ายปุ่ม radio toggle แต่เลือกได้มากกว่า 2 ค่า

การติดตั้ง

npm i react-native-switch-selector --save-dev

คอมโพเนนต์พื้นฐาน

<SwitchSelector
  options={yourOptions}
  initial={0}
  onPress={value => console.log(`value selected is: ${value}`)}
/>

คุณสมบัติสำคัญ

Props	คำอธิบาย
options	Array ของ objects ที่มี label, value, imageIcon
initial	index เริ่มต้นที่จะถูกเลือก
value	ค่าที่เลือก จะส่งมาพร้อม onPress
onPress	callback เมื่อ switch ถูกเปลี่ยน
fontSize	ขนาดฟอนต์ของ label
selectedColor	สีของ item ที่เลือก
buttonColor	สีพื้นหลังของ item ที่เลือก
textColor	สี label ของ item ที่ไม่ได้เลือก
backgroundColor	สีพื้นหลังของ component
borderColor	สีขอบของ component

ตัวอย่างที่ 1: SwitchSelector 2 ตัวเลือก (Female/Male)

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

let male = require('C:/myfirstapp/myfirstapp/assets/male.png');
let female = require('C:/myfirstapp/myfirstapp/assets/female.png');

const images = {
  "female": female,
  "male": male,
};

const options = [
  { label: "Female", value: "f", imageIcon: images.female },
  { label: "Male", value: "m", imageIcon: images.male }
];

<SwitchSelector
  initial={0}
  onPress={value => this.setState({ gender: value })}
  textColor='#ccceeaa'
  selectedColor='#7a44cf'
  buttonColor='#ccc'
  borderColor='#ccc'
  hasPadding
  options={options}
/>

โค้ดเต็มรูปแบบ

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

let male = require('C:/myfirstapp/myfirstapp/assets/male.png');
let female = require('C:/myfirstapp/myfirstapp/assets/female.png');

const images = {
  "female": female,
  "male": male,
};

const options = [
  { label: "Female", value: "f", imageIcon: images.female },
  { label: "Male", value: "m", imageIcon: images.male }
];

export default class MySwitchSelectorComponent extends Component {
  render() {
    return (
      
         this.setState({ gender: value })}
          textColor='#ccceeaa'
          selectedColor='#7a44cf'
          buttonColor='#ccc'
          borderColor='#ccc'
          hasPadding
          options={options}
        />
      
    );
  }
}

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

ผลลัพธ์

คอมโพเนนต์ SwitchSelector ใน React Native

ตัวอย่างที่ 2: SwitchSelector 3 ตัวเลือก

const options = [
  { label: "First", value: "a" },
  { label: "Second", value: "b" },
  { label: "Third", value: "c" }
];

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

const options = [
  { label: "First", value: "a" },
  { label: "Second", value: "b" },
  { label: "Third", value: "c" }
];

export default class MySwitchSelectorComponent extends Component {
  render() {
    return (
      
         this.setState({ gender: value })}
          textColor='#ccceeaa'
          selectedColor='#7a44cf'
          buttonColor='#ccc'
          borderColor='#ccc'
          fontSize='30'
          hasPadding
          options={options}
        />
      
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1 }
});

ผลลัพธ์

คอมโพเนนต์ SwitchSelector ใน React Native