android - 即使在 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
}

我附上了加载器在true和falsethis.state.animating时的外观截图。

我很惊讶为什么组件在错误时不会消失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 }

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