在react原生启动屏幕中显示ActivityIndicator 5秒

Question

我想在这个启动屏幕上显示活动指示器至少5秒。我尝试了setTimeOut方法，但它不起作用。它很快就消失了，也发出了警告。

警告：无法对已卸载的组件执行React状态更新。这是一个非操作，但它表明应用程序中存在内存泄漏。若要修复此问题，请取消useEffect中的所有订阅和异步任务清除功能。在src/screens/SpliashScreen.js:15:15 insetTimeout$argument_0

这是我的代码，我如何修复它？

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, View } from 'react-native';
const SplashScreen = () => {
const [animate, setAnimate] = useState(true);
useEffect(() => {
closeActivityIndicator();
}, []);
const closeActivityIndicator = () => {
setTimeout(() => {
setAnimate(false);
}, 5000);
};
return (
<View
style={{ flex: 1, justifyContent: 'center', backgroundColor: '#06bcee' }}
>
<ActivityIndicator animating={animate} size="large" color="#ffffff" />
</View>
);
};
export default SplashScreen;

Answer 1

我看不到您的导航函数调用在哪里。无论如何，您可以做的是将animate状态保持为true，活动指示器正在设置动画并不重要。我看到的另一个问题是，你的组件卸载了，但你的setTimout((没有被清除，所以它一直在更新你的状态。你可以这样做。

const timerRef = React.useRef(null) // you can also import useRef() directly from 'react'
useEffect(() => {
timerRef.current = setTimeout(() => {
// code for navigation
}, 5000);

return () => clearTimeout(timerRef.current);
}, []);