HOWTO · React Native
Reagieren Sie auf die native setTimeout-Methode
Dieser Artikel hilft Ihnen zu verstehen, wie Sie das Laden von Seiten mit der setTimeout-Methode in React Native verzögern können.
Auf dieser Seite
Wir zeigen in diesem kurzen Artikel, wie man setTimeout in React Native implementiert.
Verwenden Sie die setTimeout-Methode in React Native
Gelegentlich müssen wir Code nach einigen Sekunden ausführen. In solchen Fällen verwenden wir die JavaScript-API setTimeout von React Native.
Die Methode setTimeout führt eine Funktion nach Ablauf einer bestimmten Zeit aus.
Codebeispiel:
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;
Hier haben wir Code, um das Laden von Bildern mit der Methode setTimeOut zu verzögern, die das Laden der Bilder um 3000 Millisekunden verlangsamt, genau 3 Sekunden. Wir haben eine showImage-Methode deklariert, die eine setTimeOut-Methode verwendet.
Die Methode showImage wird in der Schaltfläche aufgerufen, die mit der Methode onPress von JavaScript ausgelöst wird.
Ausgang:
Das Bild erscheint nach 3 Sekunden, wenn Sie auf die Schaltfläche klicken.
