在中心显示活动指示器会导致问题

Question

我知道如何使ActivityIndi​​cator居中，但随后不会显示数据，当我删除样式时它会起作用。

代码如下：

  render() {
    const { loading, books } = this.props;
    const { container, loader } = styles;
    return (
      <View style={container}>
        <TopNavigation />
        {loading && <View style={loader}><ActivityIndicator color="#eaae5b" size="large" /></View>}
      </View>
    );
  }

}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  loader: { 
    position: 'absolute', 
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'}
});

如果我删除“加载程序”样式，它将起作用，它会显示TopNavigation的初始路径。

以下是一些图片：

Answer 1

   <View
      style={{
        flex: 1,
        padding: 20,
        alignContent :'center',
        justifyContent :'center',

      }}>

      <ActivityIndicator size="large" color="#45B649" />
    </View>