Индикатор активности не содержит заголовка на React-Native

Question

Я хочу установить индикатор активности при вызове api, чтобы пользователь ничего не мог сделать, проблема в том, что когда я вызываю api, индикатор активности не включает заголовок (с использованием реакции-навигации), поэтому, пока вызывая api, пользователь может go вернуться к предыдущему экрану, в соответствии с этим возникает непредвиденная ошибка.

Вот код:

import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';

const Screen1 = () => {
  const [isLoading, setLoading] = useState(false);
  useEffect(() => {
    const fn = async () => {
      setLoading(true);
      const apiRes = await fetch(...);
      setLoading(false);
    };
    fn();
  }, []);
  const renderIndicator = () => {
    return (
      <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' }}>
       <ActivityIndicator />
      </View>
    );
  }
  return (
    <>
      <View style={{ flex: 1, backgroundColor: 'orange' }}>
        {...}
      </View>
      {isLoading && renderIndicator()}
    </>
  );
}
export default Screen1;

Здесь основная проблема is <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' }}> не содержит контейнера заголовка (реакции-навигации). Я хочу, чтобы индикатор активности содержал строку заголовка.

Я могу скрыть стандартный контейнер заголовка и использовать настраиваемый заголовок. но требуется использовать стандартный заголовок, а не настраиваемый.

Answer 1

У меня есть очень простое решение вашей проблемы - использовать "Modal". Просто создайте компонент под названием Loader или как хотите, и вставьте в него этот код. Я использовал собственные индикаторы реакции, но вы можете использовать реакцию. -native's ActivityIndicator, если вам нужен загрузчик. js

    import React, {Component} from 'react';
    import {
      Text,
      View,
      Modal,
      SafeAreaView,
      Alert,
      ActivityIndicator,
    } from 'react-native';
    import {SkypeIndicator} from 'react-native-indicators';
    import styles from './styles';
    import {Colors} from '../../Themes';
    export default class Loader extends Component {
      state = {

      };

   render() {
        return (
          <Modal
            animationType="none"
            transparent={true}
            visible={this.props.visible}>
            <SafeAreaView
              style={{
                ...styles.container,
                backgroundColor:
                  this.props.type === 'invisible'
                    ? `rgba(255,255,255,${1})`
                    : `rgba(0,0,0,${this.props.transparancy})`,
                ...this.props.customStyle,
              }}>
              <SkypeIndicator size={50} color={Colors.primary} />
            </SafeAreaView>
          </Modal>
        );
      }
    }

Styles.js

    import {StyleSheet} from 'react-native';

    export default StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
    });

Просто импортируйте его везде, где вы хотите его использовать, и используйте его таким образом

import Loader from '../../Components/Loader';
Put the <Loader/> before the last closing tag in the component
 <Loader visible={this.props.signin.fetching} transparancy={0.7}/>