[j React-Native] Slider (react-native-slider)

React Native 에서 Slider 기능을 추가해보자.

 

 

1. Slider 설치

yarn add @react-native-community/slider

or

npm install @react-native-community/slider --save

 

2. import 

import Slider from '@react-native-community/slider';

 

 

3. Slider 추가

<Slider
  style={{width: 200, height: 40}}
  minimumValue={0}
  maximumValue={1}
  minimumTrackTintColor="#FFFFFF"
  maximumTrackTintColor="#000000"
/>

 

4. Slider 값 바꿔주기 (.js)

 state = {
        value:50 //초기 값
  }

 sliderValueChange =(value) => {
        this.setState({
            value: value
        })
  }
    
    
  <Slider 
        style={{height:40,width:300}}
        value={this.state.value}
        minimumValue={0}
        maximumValue={100}
        onValueChange={this.sliderValueChange}
        maximumTrackTintColor='red'
        minimumTrackTintColor='blue'
        step={1} //값이 10단위로 바뀜
   />
   
   <Text
      style={styles.input}
   >{this.state.value}</Text>

 

 

 

 

 

 

더 많은 옵션을 추가하고 싶으면 참고 사이트에서 참고해 추가하면 된다.

 

 

** 참고 사이트 ** 

https://github.com/callstack/react-native-slider

GitHub - callstack/react-native-slider: React Native component exposing Slider from iOS and SeekBar from Android