HOWTO · React Native
Método React Native setTimeout
Este artículo lo ayudará a comprender cómo retrasar la carga de páginas utilizando el método setTimeout en React Native.
En esta página
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.
