即使在 React Native 中状态发生变化后，组件的叠加层也不会消失

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 为 false 时组件不会消失。我不确定我做错了什么。

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 }

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

即使在 React Native 中状态发生变化后，组件的叠加层也不会消失

Component's overlay doesn't disappear even after state changes in react native

android

reactjs

react-native

react-native-android

activity-indicator