显示customer微调器5秒，之后显示内容
显示customer微调器5秒，之后显示内容
提问于 2021-02-10 21:45:30
我正在开发一个原生的react项目。我有一个作为自定义组件的微调器：
const MySpinner = ({hide = false}) => {
...
if (hide) {
return null;
} else {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Animated.View>
<MyIcon />
</Animated.View>
</View>
);
}
} 正如您在上面看到的，有一个hide属性决定我是否在父组件中显示MySpinner。
在MyScreen中，我想显示5秒钟的MySpinner，然后显示实际内容(不涉及网络回调)。我尝试使用setTimeOut函数来实现它。
这是我尝试过的：
const MyScreen = () {
...
return (
<View style={styles.container}>
{setTimeout(() => { <MySpinner hide={true}/>}, 3000)}
<ActualContent />
</View>
)
}在运行时，我得到了错误Error: Text strings must be rendered within a <Text> component.
此外，在MySpinner消失后，上面的代码不会显示实际内容。
那么，我如何才能实现我需要的东西呢？这是先显示MySpinner 5秒，然后显示实际内容。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-10 21:55:09
您可以通过多种方式来实现这一点，这里有一个简单的示例来帮助您入门。
代码沙盒=> https://codesandbox.io/s/wonderful-chebyshev-io6pd?file=/src/App.js
更新答案
import { useEffect, useState } from "react";
export default function App() {
const [spinner, setSpinner] = useState(true);
useEffect(() => {
setTimeout(() => {
setSpinner(false);
}, 5000);
}, []);
const component = spinner ? (
<span>Loading...</span>
) : (
<h1>Component Ready</h1>
);
return <div className="App">{component}</div>;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66138107
复制相关文章
相似问题
腾讯云开发者
