React Native，使用加载指示器和 setTimeout() 覆盖（覆盖）请求的页面以隐藏它答案

【问题标题】：React Native, Cover (Overlay) the Requested Page with Loading Indicator and setTimeout() to Hide itReact Native，使用加载指示器和 setTimeout() 覆盖（覆盖）请求的页面以隐藏它
【发布时间】：2020-11-21 16:59:09
【问题描述】：

我有这个代码，它可以很好地显示覆盖请求的页面 5 秒并隐藏以显示请求的页面的内容，但是当加载器指示器消失时，它的（红色）背景仍然存在，如何隐藏背景呢？它有两部分首先用于创建加载指示器以在 5 秒后隐藏。 Expo.io 上的工作示例： Live Demo - 这是请求页面的代码：（请注意，必须从 /screens 调用）

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Loader from './screens/Loader';

export default function App() {
return (
<View style={styles.container}>
<Loader /> //<--- I put the Loader here
  <Text style={styles.paragraph}>
    This is the requested page should be be covered by indicator background (Red color) <br/ >
    The Loader disappear after 5 sec.<br />
    But, its background still there!!
  </Text>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});

Loader.js 代码是：

import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';

class Loader extends Component {
state = { animating: true }

closeActivityIndicator = () => setTimeout(() => this.setState({
animating: false }), 5000)

componentDidMount = () => this.closeActivityIndicator()
render() {
  const animating = this.state.animating
  return (
     <View style = {styles.container}>
        <ActivityIndicator
           animating = {animating}
           color = '#bc2b78'
           size = "large"
           style = {styles.activityIndicator}/>
     </View>
  )
  }
  }
 export default Loader
 const styles = StyleSheet.create ({
 container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  marginTop: 0,
  position: 'absolute',
  height: "100%",
  width: "100%",
  backgroundColor: 'red',
  opacity: 0.7
  },
  activityIndicator: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  }
  })

【问题讨论】：

标签： javascript html css react-native activity-indicator

【解决方案1】：

问题是你总是渲染加载器并且它总是可见的，所以处理这个问题的最简单方法是返回 null 并在不需要时隐藏加载器，如下所示。

   render() {
      const animating = this.state.animating;

      if(!this.state.animating)
        return null;

      return (
         <View style = {styles.container}>
            <ActivityIndicator
               animating = {animating}
               color = '#bc2b78'
               size = "large"
               style = {styles.activityIndicator}/>
         </View>
      )
   }

【讨论】：