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