React native 슬라이더

citron03·2022년 10월 22일
0

React Native

목록 보기
6/7
  • Slider는 흔히 볼 수 있는 UI로, 사용자가 좌우로 슬라이드하여 값을 설정할 수 있는 컴포넌트이다.
  • 리액트 네이티브에서는 라이브러리를 사용하여 손쉽게 이를 구현할 수 있다.
  • import Slider from '@react-native-community/slider';
// 설치하기
yarn add @react-native-community/slider
or

npm install @react-native-community/slider --save
  • state와 연결하여 사용하기
import React, { useState } from 'react';
import { SafeAreaView, View, Text } from 'react-native';
import Slider from '@react-native-community/slider';

const SliderComponent = () => {
	const [sliderValue, setSliderValue] = useState(0);
	return (
      <SafeAreaView>
    	<Slider
        	value={sliderValue}
            onValueChange={(e) => setSliderValue(e)}
 	  		minimumValue={0}
	  		maximumValue={100}
  	  		minimumTrackTintColor="black"
  	  		maximumTrackTintColor="yellow"
            step={5}
	  	/>
        <View>
        	<Text>{sliderValue}</Text>
        </View>
      </SafeAreaView>
    )
}

github 문서 : https://github.com/callstack/react-native-slider#readme

profile
🙌🙌🙌🙌

0개의 댓글