[React Native] Slider 스크롤 금지 disabled 속성

React Native Slider 스크롤 금지 disabled 속성

Slider 사용중 스크롤 금지, 사용자 touch event를 금지, thumb가 이동하지 않도록 하는 방법입니다.

 

Slider 태그안에 disabled 속성을 추가하셔서 true를 추가하시면 됩니다.

다음은 예제 코드입니다.

 

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단위로 값이 변경 
                disabled={true}
            />
            <Text> {myValue} </Text>
        </View>

    )
}

export default AppSlider;