如何将ActivityIndi​​cator中心放置到视图

Question

我是本机新手，实际上我制作了一个登录组件页面，每当用户按下登录名时，我都必须显示活动指示器。但是这里我的问题是View在列方向上包含一些组件，我该如何放置它。

代码：

 <ImageBackground style={styles.imageStyle} source={require('../images/splash_background_landscape.png')}>
       <View style={styles.loadingStyle}>
            <ActivityIndicator></ActivityIndicator>
          </View>

        <View style={styles.parentViewStyle}>

        </View>



      </ImageBackground>



parentViewStyle: {
    flex: 1,
    marginTop: 20,
  },

loadingStyle : {
   flex :1
    justifyContent : 'center',
    alignItems : 'center'
  }

Answer 1

创建一个新的类hudView.js并将其重新用于所有加载屏幕，

import React, { Component } from "react";
import { View, ActivityIndicator } from "react-native";

export default class hudView extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View
        style={{
          position: "absolute",
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "rgba(110,110,110,0.5)"
        }}
      >
        <View
          style={{
            width: 100,
            height: 100,
            backgroundColor: "transparent", //"rgba(255,255,255,1)",
            alignItems: "center",
            justifyContent: "center",
            borderRadius: 5,
            overflow: "hidden"
          }}
        >
          <ActivityIndicator size="large" color="red" />
        </View>
      </View>
    );
  }
}

并在您的班级中使用它，

例如：

...
import HudView from "../../components/hudView";
...


render() {
 return(
  ...
  ...
  {this.state.isLoading ? <HudView ref={"hudView"} /> : null}
)
}