Android设备上的Flexbox居中问题

Question

我的应用程序中有一个加载组件，它将在我的api调用和...期间作为模式弹出。我试图使用模式和视图的顶部，并通过使用flexbox选项使其居中，它在ios上效果很好，但在android设备上有时却可以工作，有时却不能，似乎无法检测到设备的真实宽度和高度并让我的视图超出屏幕。

这是我的代码： 这是我的加载器组件：

export class LoaderAPI extends Component {

  render() {
    const {
      loading,
      ...attributes
    } = this.props;
    return (
      <Modal
        transparent={true}
        animationType={'none'}
        visible={loading}
        onRequestClose={() => { console.log('close modal') }}>
        <View style={styles.modalBackground}>
          <View style={styles.activityIndicatorWrapper}>
            <ActivityIndicator
              animating={loading} />
          </View>
        </View>
      </Modal>
    );
  }
}

这是我的风格：

modalBackground: {
        flex: 1,
        alignItems: 'center',
        flexDirection: 'column',
        justifyContent: 'center',
        backgroundColor : 'rgba(20,20,20,.65)',        
      },
activityIndicatorWrapper: {
        backgroundColor: '#FFFFFF',
        height: normalize(100),
        width: normalize(100),
        borderRadius: normalize(10),
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    },

那很奇怪，因为它在ios上以及在android上都可以完美运行。

请帮助我。 谢谢。

这是我的应用程序女巫显示问题的示例图像。