Método React Native setTimeout

Shiv Yadav 15 febrero 2024 React Native

Demostraremos en este breve artículo cómo implementar setTimeout en React Native.

Use el método `setTimeout` en React Native

Ocasionalmente, es posible que necesitemos ejecutar código después de unos segundos. En tales circunstancias, usamos la API de JavaScript de React Native setTimeout.

El método setTimeout realiza una función después de que haya pasado un tiempo específico.

Ejemplo de código:

import React from 'react';
import {Button, Image, StyleSheet, View} from 'react-native';

const App = () => {
  const [image, setImage] = React.useState(null);

  const showImage = () => {
    setTimeout(() => {
      setImage(
          'https://www.casio.com/content/dam/casio/product-info/locales/us/en/timepiece/product/watch/G/GM/gm2/gm-2100-1a/assets/GM-2100-1A.png.transform/main-visual-pc/image.png');
    }, 3000);
  };

  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}>
        <Image
          source={
    { uri: image }}
          style={
    { width: '100%', height: 160 }}
          resizeMode='contain'
        />
      </View>
      <View style={styles.buttonContainer}>
        <Button
          title="Click On the button to see the image"
          onPress={() => showImage()}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 0.85,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  buttonContainer: {
    marginTop: 10,
  },
  imageContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Aquí tenemos un código para retrasar la carga de imágenes usando el método setTimeOut, que ralentiza la carga de las imágenes en 3000 milisegundos, exactamente 3 segundos. Hemos declarado un método showImage que utiliza un método setTimeOut.

El método showImage se invoca en el botón, que se activa utilizando el método onPress de JavaScript.

Producción:

La imagen aparecerá después de 3 segundos al hacer clic en el botón.

la imagen aparece después de que haya pasado un tiempo específico

¿Disfrutas de nuestros tutoriales? Suscríbete a DelftStack en YouTube para apoyarnos en la creación de más guías en vídeo de alta calidad. Suscríbete

Autor: Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

Use el método setTimeout en React Native

Artículo relacionado - React Native

Use el método `setTimeout` en React Native