import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
const TimerExample = () => {
const [timer, setTimer] = useState(0);
// 使用 useEffect 创建一个简单的计时器
useEffect(() => {
const intervalId = setInterval(() => {
setTimer(prevTimer => prevTimer + 1);
}, 1000);
// 组件卸载时清除计时器
return () => clearInterval(intervalId);
}, []);
const handleStopTimer = () => {
// 在这里可以添加停止计时器的逻辑
clearInterval(intervalId);
};
return (
<View>
<Text>Timer: {timer} seconds</Text>
<Button title="Stop Timer" onPress={handleStopTimer} />
</View>
);
};
export default TimerExample;
在这个例子中，setInterval每隔一秒更新一次timer的值，而useEffect确保了在组件挂载时开始计时，以及在组件卸载时清除计时器，以防止内存泄漏。
你可以根据需要修改计时器的间隔和实现逻辑。如果你只需要一次性的延迟操作，可以使用setTimeout：
import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
const TimerExample = () => {
const [timer, setTimer] = useState(0);
// 使用 useEffect 创建一个简单的延迟操作
useEffect(() => {
const timeoutId = setTimeout(() => {
setTimer(1);
}, 3000);
// 组件卸载时清除延迟操作
return () => clearTimeout(timeoutId);
}, []);
return (
<View>
<Text>Timer: {timer} seconds</Text>
</View>
);
};
export default TimerExample;
这里的setTimeout会在组件挂载后等待3秒钟，然后更新timer的值。
转载请注明出处：http://www.zyzy.cn/article/detail/9505/React Native