如何将 ActivityIndicator 中心放置到视图

Question

我是 react-native 的新手，实际上我制作了一个登录组件页面，每当用户按下登录时我都必须显示 activity 指示器。但我的问题是视图包含一些列方向的组件，我该如何放置它。

代码：

 <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

为所有加载屏幕创建一个新的 class、hudView.js 和 re-use，

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>
    );
  }
}

并在您的 class、

中使用它

例如：

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


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

如何将 ActivityIndicator 中心放置到视图

How to place ActivityIndicator center to the View

react-native

react-native-ios

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

How to place ActivityIndicator center to the View

react-native

react-native-ios

如何将 ActivityIndicator 中心放置到视图