时间戳

首页 > 解决方案 > 如何将 ActivityIndi​​cator 中心放置到视图中

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

问题描述

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

代码：

 <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'
  }

标签： react-nativereact-native-ios

解决方案

创建一个新类，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}
)
}

推荐阅读