Как разместить ActivityIndicator center для просмотра

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