Estoy trabajando en un proyecto nativo de React, quiero mover la etiqueta junto con el valor del control deslizante. Lo intenté de muchas maneras, pero no funciona con precisión. Aquí está mi código:
import React, { useState } from 'react' import { Text, StyleSheet, View, Dimensions } from 'react-native' import Slider from '@react-native-community/slider'; function LabelSlider() { const windowWidth = Dimensions.get('window').width; const [value, setValue] = useState(0) // const left = value * (windowWidth-60)/85; const [showValue, setShowValue] = useState(false) //var percent = (percentToGet / 100) * number; return ( <View> {showValue ? <View > <Text style={{ width:50, textAlign: 'auto', left: value}}>{value}</Text> </View> : <></>} <Slider style={{ width: 200, height: 40 }} maximumValue={300} minimumValue={0} step={1} value={value} onValueChange={(value) => setValue(value)} onSlidingStart={() => setShowValue(true)} onSlidingComplete={() => setShowValue(true)} minimumTrackTintColor="#FFFFFF" maximumTrackTintColor="#000000" /> </View> ) } export { LabelSlider }También he adjuntado dos imágenes de la salida que pude obtener: Imagen 1 , Imagen 2
Puede usar un valor compartido e interpolar la posición izquierda de la etiqueta. En este momento lo que sucede es que el valor de la izquierda va de 0 a 300. Esto hace que la etiqueta no responda. Puede hacer algo como se muestra a continuación.
Además, aquí hay un Snack para la implementación.
import * as React from 'react'; import { Text, View, StyleSheet } from 'react-native'; import Slider from '@react-native-community/slider'; import Animated, { useSharedValue, useAnimatedStyle, interpolate, Extrapolate, } from 'react-native-reanimated'; // Constants const MAX_SLIDER_VALUE = 300; const MIN_SLIDER_VALUE = 0; const SLIDER_WIDTH = 200; export default function App() { // State to store progress value of slider const [value, setValue] = React.useState(0); // Shared value for storing label position const progress = useSharedValue(0); // Whenever `value` changes, update the progress shared value // This will accordingly update the left position of the label React.useEffect(() => { progress.value = value; }, [value]); // Animate the left position according to the shared value // Also Extrapolate it so that it doesn't exceed 100% const animatedStyle = useAnimatedStyle(() => { const leftPosition = interpolate( progress.value, [MIN_SLIDER_VALUE, MAX_SLIDER_VALUE], [0, 100], Extrapolate.CLAMP ); return { left: `${leftPosition}%`, }; }); return ( <View style={styles.container}> <View style={{ width: SLIDER_WIDTH }}> <Animated.View style={[styles.labelView, animatedStyle]}> <Text>{value}</Text> </Animated.View> <Slider style={{ width: SLIDER_WIDTH, height: 40 }} maximumValue={MAX_SLIDER_VALUE} minimumValue={MIN_SLIDER_VALUE} step={1} value={value} onValueChange={setValue} minimumTrackTintColor="#FFFFFF" maximumTrackTintColor="#000000" /> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ecf0f1', padding: 8, }, labelView: { marginBottom: 20, }, });Puede usar el control deslizante de elemento nativo de reacción para esto, he dado el código de ejemplo a continuación
import React from 'react'; import { View } from 'react-native'; import {Slider} from 'react-native-elements'; const App = () => { return ( <View style={{ flex: 1, justifyContent: "center", }}> <Slider thumbStyle={{height: 15, width: 15, backgroundColor: 'orange'}} maximumTrackTintColor="grey" minimumTrackTintColor="orange" thumbProps={{ children: ( <View style={{ color: 'green', marginTop: -22, width: 100, }}> <Text>Value</Text> </View> ), }} /> </View> ) } export default App;