即使在本机反应状态发生变化后，组件的叠加层也不会消失

Question

以下是我的代码：

// Styling for the common loader
const loader = StyleSheet.create({
  centering: {
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    padding: 8,
    zIndex: 1005,
    backgroundColor: '#fff',
    opacity: 0.8
  },
});

// State
this.state = {
   animating: false
};

// Component
{
  this.state.animating ?
  <ActivityIndicator
    animating={this.state.animating}
    color="#8bcb43"
    style={loader.centering}
    size="large"
  />
    :
  null
}

我附上了this.state.animating true 时加载器的外观以及 false 时的截图。

我很惊讶当this.state.animating为假时组件不会消失的原因。我不确定我做错了什么。

Answer 1

九个月前，当我使用React Native 0.35.0时，我遇到了这个问题，这是我当时所做的，因为我没有找到任何合适的解决方案：

import React, { Component } from 'react';

import {
  StyleSheet,
  ActivityIndicator
} from 'react-native';

// Styling for the common loader
const loader = StyleSheet.create({
  centering: {
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 5,
    backgroundColor: '#fff',
    opacity: 0.8
  },

  hideIndicator: {
    position: 'absolute',
    top: -100,
    opacity: 0
  }
});

export default class Loader extends Component {

  render() {
    /* The reason for adding another activity indicator was to hide the first one */
    /* At the time of development, ActivityIndicator had a bug of not getting hidden */
    return (
      <ActivityIndicator
        animating={ this.props.animating }
        color="#8bcb43"
        style={ this.props.animating ? loader.centering : loader.hideIndicator }
        size="large"
      />
    );
  }
}

我切换了加载状态的样式。

style={ this.props.animating ? loader.centering : loader.hideIndicator }

我不确定此问题是否仍然存在，但如果您遇到同样的问题，我希望这个答案有所帮助。