如何在未显示时隐藏包含 activity 指标的视图

Question

我有以下情况：我创建了 View，其中放置了 ActivityIndicator：

<View style={{ flexDirection: 'row', justifyContent: 'space-around', padding: 10 }}>
  <ActivityIndicator animating={this.props.isLoading} size="large" color="#0000ff" />
</View>

问题是当ActivityIndicator被隐藏时，View仍然显示。那么，隐藏ActivityIndicator后如何隐藏这个视图呢？或者也许有任何其他方法可以删除这个空的地方，加载指示器在哪里？

Answer 1

快速修复将是：

<View style={{ flexDirection: 'row', justifyContent: 'space-around', padding: this.props.isLoading ? 10 : 0 }}>
  <ActivityIndicator animating={this.props.isLoading} size="large" color="#0000ff" />
</View>

但尝试做类似的事情：

renderLoader() {
  if (this.props.isLoading) {
    return (
      <View style={{ flexDirection: 'row', justifyContent: 'space-around', padding: 10}}>
        <ActivityIndicator animating={this.props.isLoading} size="large" color="#0000ff" />
      </View>
    );
  }
  return null;
}

或者只是将实现更改为：

{this.props.isLoading ? 
  <View style={{ flexDirection: 'row', justifyContent: 'space-around', padding: 10}}>
        <ActivityIndicator animating={this.props.isLoading} size="large" color="#0000ff" />
      </View> 
: null}

如何在未显示时隐藏包含 activity 指标的视图

How to hide view which contains activity indicator when it isn not shown

react-native

activity-indicator