ReactNative SwitchSelector 구성 요소 설명

<시간/>

SwitchSelector 구성 요소는 라디오 토글 버튼과 유사합니다. 2개 이상의 값으로 선택할 수 있습니다.

SwitchSelector로 작업하려면 아래와 같이 패키지를 설치해야 합니다 -

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

기본 SwitchSelector는 다음과 같습니다 -

<SwitchSelector
   106
   React Native – Q&A
   options={youroptions}
   initial={0}
   onPress={value => console.log(`value selected is : ${value}`)}
/>

다음은 SwitchSelector의 몇 가지 중요한 속성입니다 -

소품	설명
옵션	레이블, 값 및 이미지 아이콘 ID가 있는 배열이 필요합니다.
초기	선택될 배열의 초기 항목.
값	onPress 이벤트 내에서 사용할 수 있는 스위치 값
온프레스	스위치가 변경될 때 호출될 콜백 함수가 있는 이벤트입니다.
글꼴 크기	레이블에 대해 고려할 fontSize.
선택된 색상	선택한 항목의 색상입니다.
버튼색상	선택한 항목의 배경색입니다.
텍스트 색상	선택되지 않은 항목의 레이블 색상입니다.
배경색	스위치 선택기 구성요소의 backgroundColor입니다.
테두리 색상	구성 요소에 지정될 테두리 색상입니다.

예:SwitchSelector 작업

SwitchSelector로 작업하려면 다음과 같이 구성 요소를 가져와야 합니다.

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

SwitchSelector 내부에는 여성/남성이라는 두 가지 옵션이 표시되지 않습니다.

이 예에서는 여성 및 남성 이미지를 사용하고 있으며 옵션 배열에서도 동일하게 사용됩니다.

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는 다음과 같습니다 -

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

다음은 SwitchSelector의 전체 코드입니다 -

예시

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 (
         <SafeAreaView style={styles.container}>
            <SwitchSelector
               initial={0}
                  onPress={value => this.setState({ gender: value })}
                  textColor='#ccceeaa'
                  selectedColor='#7a44cf'
                  buttonColor='#ccc'
                  borderColor='#ccc'
                  hasPadding
                  options={options}
            />
         </SafeAreaView>
      )
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center"
   },
});

출력

출력은 다음과 같습니다 -

ReactNative SwitchSelector 구성 요소 설명

예시 2:세 가지 옵션이 있는 SwitchSelector

아래 예에서는 세 가지 옵션을 사용했습니다 -

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 (
         <SafeAreaView style={styles.container}>
            <SwitchSelector
               initial={0}
               onPress={value => this.setState({ gender: value })}
               textColor='#ccceeaa'
               selectedColor='#7a44cf'
               buttonColor='#ccc'
               borderColor='#ccc'
               fontSize='30'
               hasPadding
               options={options}
            />
         </SafeAreaView>
      )
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1
   }
});

출력

ReactNative SwitchSelector 구성 요소 설명