我试图将您的代码简化为其逻辑框架。我希望这会奏效，您可以开始添加样式等。

export default class LoginButton extends Component {
  state = {
    isLoading: false
  };

  doSignup = async () => {
    this.setState({ isLoading: true });
    await asyncSignupFunction();
    this.setState({ isLoading: false })
  };

  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.doSignup}>
          <Text>Sign Up Now</Text>
        </TouchableOpacity>
        <ActivityIndicator animating={this.state.isLoading} />
      </View>
    );
  }
}

我不反对其他答案，但我不赞成其他答案方法。

为什么我没有留下深刻印象：

假设我们有 6 个屏幕，所以根据其他答案方法，我必须在所有 6 个屏幕中处理我的加载程序，当我们可以全局处理它时，为什么要跟踪每个屏幕（which was I am doing from last one year）。

我的新方法：

npm i react-native-loading-spinner-overlay

创建 AppLoader.js

import React from 'react';
import Spinner from 'react-native-loading-spinner-overlay';
export const loaderRef = React.createRef();

export function showLoader() {
    let ref = loaderRef.current
    if (ref) {
        ref.showLoader()
    }
}

export function hideLoader() {
    let ref = loaderRef.current
    if (ref) {
        ref.hideLoader()
    }
}

class AppLoader extends React.Component {

    constructor(props) {
        super(props)
        this.state = { loader: false }
    }

    showLoader() {
        this.setState({ loader: true })
    }

    hideLoader() {
        this.setState({ loader: false })
    }

    render() {
        return (
            <Spinner visible={this.state.loader} />
        );
    }
};

export default AppLoader

在你的 App.js 里面

import AppLoader, { loaderRef } from 'path of AppLoader.js';

render(){
return (
        <View style={{ flex: 1 }}>
          <AppLoader ref={loaderRef} />
        </View>
  );
}

如何使用它：

import { showLoader, hideLoader } from 'path of Appoader.js';

现在您可以轻松使用showLoader()和hideLoader()运行，而无需处理状态和加载程序处理。

问题在于 ActivityIndi​​cator 的位置。

尝试删除容器视图的样式，加载程序将可见。

  <View>
     <ActivityIndicator animating={this.state.showLoader} size="small" 
        color="#00ff00" />
   </View>

我对您现有的代码进行了一些更正。

我在这里提到了一些关键的变化：

1. 查看结构

2. 在活动指示器视图中的位置

   constructor(props) {
     super(props);
     this.doSignup = this.doSignup.bind(this);
     this.state = {
       showLoader:false
     }
   }
     showLoader = () => { this.setState({ showLoader:true }); };
     hideLoader = () => { this.setState({ showLoader:false }); };
   
    doSignup(){
      this.showLoader();
    }
   render() {
     return (
        <View style={{flex:1}}>
           <TouchableOpacity style={{ marginTop: 25 }} onPress={this.doSignup}>
             <View style={[ styles.button, { backgroundColor: '#5a0060' } ]}>
              <Text style={{ fontSize: 20, color: "white" }}>Sign Up Now</Text>
           </View>
          </TouchableOpacity>
   
       <View style={{ position: 'absolute', top:"50%",right: 0, left: 0 }}>
         <ActivityIndicator animating={this.state.showLoader} size="large" color="red" />
       </View>
   </View>
     );
    }