[React Native] Slider 활용

React Native Slider 활용

출처 https://www.npmjs.com/package/react-native-slider

Slider란 위에 화면 밝기 조절할 때 좌우로 움직이는 스크롤이라고 할 수 있는데요.

사용자가 스크롤을 함으로 값이 변경되거나, 변경된 값에 따라 스크롤이 움직이는 동작을 합니다.

 

우선 설치 입니다.

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

 

다음은 Slider를 Hooks functional component 방식을 사용하여 만든 간단한 예제입니다.

import Slider from '@react-native-community/slider';
import React, { useState } from 'react';
import { Text, View } from 'react-native';

const AppSlider = ({

}) => {
    const [myValue, setMyValue] = useState(0);

    return (
        <View>
            <Slider
                style={{ height: 40, width: 300 }}
                value={myValue} // == this.state.value
                onValueChange={(value) => setMyValue(value)} // 슬라이더를 움질일때 출력값 변환
                minimumValue={0} // 최소값 설정
                maximumValue={100} // 최대값 설정
                maximumTrackTintColor='red' // 값이 크면 빨간색
                minimumTrackTintColor='blue' // 값이 작으면 파란색
                step={1} // 1단위로 값이 변경 
            />
            <Text> {myValue} </Text>
        </View>

    )
}

export default AppSlider;

다른 것들은 npm에서 간단하게 사용법과 어떤 용도인지 알기 쉬운데요,

value와 onValueChange만 사용법을 잘 알고 넘어가야 합니다.

 

value에서 처음 지정해주는 default 값입니다.

지금 myValue는 useState에서 0으로 초기화 하였기에, 초기 default값은 0입니다.

하지만, onValueChange에서 myValue의 값이 바뀌게 되면 value값 또한 바뀌게 됩니다.

 

다음은 위에서 만든 컴포넌트를 호출하였을때입니다.

스크롤을 하면 myValue의 값이 변경되며, 아래 Text로 myValue 값을 보여줍니다.