Блог

Главная - Вопросы по программированию - Библиотека вертикальных слайдеров React Native

Библиотека вертикальных слайдеров React Native

#javascript #react-native

Вопрос:

Я пытаюсь использовать библиотеку «Вертикальный слайдер React Native» (https://github.com/sacmii/rn-vertical-slider/blob/master/README.md) и у меня возникли проблемы с пониманием того, как использовать свойства «onChange» и «onComplete» :

 onChange={(value: number) => {
  console.log("CHANGE", value);
}}

onComplete={(value: number) => {
  console.log("COMPLETE", value);
}}

Я хочу изменить переменную на значение ползунка, но я не уверен, как это сделать, я получаю ошибки из-за ключевого слова «число».

Комментарии:

1. Это number ключевое слово предназначено для машинописного текста, если вы не используете машинописный текст, вы можете безопасно удалить : number его из своего кода

Ответ №1:

Вот хороший пример, который поможет вам начать (пожалуйста, имейте в виду, что с rn-вертикальным ползунком есть несколько проблем, например, значение шара не обновляется. Возможно, вы захотите попробовать вместо этого react-native-плавный слайдер):

 import {View, Text, StyleSheet} from 'react-native';
import VerticalSlider from 'rn-vertical-slider';

const STARTING_VALUE = 1;

const App = () => {
  const [sliderValue, setSliderValue] = useState(STARTING_VALUE);
  const [completeValue, setCompleteValue] = useState(STARTING_VALUE);

  return (
    <View style={styles.container}>
      <VerticalSlider
        value={sliderValue}
        disabled={false}
        min={0}
        max={100}
        onChange={value => {
          console.log('CHANGE', value);
          setSliderValue(value);
        }}
        onComplete={value => {
          console.log('COMPLETE', value);
          setCompleteValue(value);
        }}
        width={50}
        height={300}
        step={1}
        borderRadius={5}
        minimumTrackTintColor={'gray'}
        maximumTrackTintColor={'tomato'}
        showBallIndicator
        ballIndicatorColor={'gray'}
        ballIndicatorTextColor={'white'}
      />
      <Text>Complete value = {completeValue}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;
Метки: