HOWTO · React Native
React Native setTimeout メソッド
この記事は、React Native で setTimeout メソッドを使用してページの読み込みを遅らせる方法を理解するのに役立ちます。
このページの内容
この短い記事では、React Native で setTimeout を実装する方法を示します。
React Native で setTimeout メソッドを使用する
数秒後にコードを実行する必要がある場合があります。 そのような状況では、React Native の JavaScript API setTimeout を使用します。
setTimeout メソッドは、指定された時間が経過した後に関数を実行します。
コード例:
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;
ここでは、setTimeOut メソッドを使用して画像の読み込みを遅らせるコードがあります。これにより、画像の読み込みが 3000 ミリ秒、正確には 3 秒遅くなります。 setTimeOut メソッドを使用する showImage メソッドを宣言しました。
showImage メソッドはボタンで呼び出され、JavaScript の onPress メソッドを使用してトリガーされます。
出力：
ボタンをクリックすると3秒後に画像が表示されます。
