0
252
Visualizações¿Cómo obtengo esta barra de progreso de reaccionar nativo?
Así que quiero implementar una barra de progreso como esta en reaccionar nativo. Encontré una biblioteca que es https://www.npmjs.com/package/react-native-progress , pero esta biblioteca no tiene una barra de progreso como esta. El problema es la parte del círculo. ¿Hay alguna biblioteca que tenga una barra de progreso como esta? Si no lo hay, se agradecería cualquier idea sobre cómo implementar esto. Entonces, como un compañero comentarista se confundió si se trata de un control deslizante o una barra de progreso, incluiré la imagen de pantalla completa. Hay un temporizador y la barra de progreso o el control deslizante de progreso lo reflejan en tiempo real.
1 Respostas
Responde à pergunta0
Todavía podemos explotar react-native-community/slider para este propósito. Esto tendría sentido ya que podemos permitir que el usuario avance rápidamente. Si no desea permitir la interacción del usuario, aún puede deshabilitarla a través de los accesorios del componente deslizante.
Para un deslizamiento suave, el control deslizante cambia su valor a una tasa de tic más alta. Es posible que desee experimentar un poco con él para que se ajuste a sus necesidades.
Aquí hay un ejemplo de cómo lo hice.
const [progress, setProgress] = useState(-1) // takes time in seconds function interpolate(time) { return time * 600 } // runs 10 seconds, you can take any other value const [time, setTime] = useState(interpolate(10)) useEffect(() => { if (progress < time && progress > -1) { const timer = setTimeout(() => setProgress(progress + 10), 10) return () => clearTimeout(timer) } }, [progress, time]) const startTimer = React.useCallback(() => { setProgress(0) }, []) return ( <SafeAreaView style={{ margin: 30 }}> <Slider style={{ width: 300, height: 40, backgroundColor: "red" }} value={progress} minimumValue={0} maximumValue={time} minimumTrackTintColor="#FFFFFF" maximumTrackTintColor="#FFFFFF" /> <Pressable style={{ marginTop: 10 }} onPress={() => startTimer()}> <Text>Toggle timer</Text> </Pressable> </SafeAreaView> )Lo anterior es una implementación ficticia que ejecutará un temporizador durante 10 segundos y el control deslizante se moverá automáticamente como una barra de progreso.