Question

我正在尝试在我的react native应用程序中实现加载器动画，但是单击动画后它不会触发加载器，尽管动画已经更改为true。

在下面查看我的代码。

componentWillMount(){
    this.hideLoader();
}

showLoader = () => { this.setState({ showLoader:true }); };
hideLoader = () => { this.setState({ showLoader:false }); };

doSignup = () => {
    this.showLoader();
}

render() {
    console.log(this.state.showLoader);
    return (
        <View>
            <TouchableOpacity style={{ marginTop: 25 }} onPress={this.doSignup}>
              <View style={[ styles.button, { backgroundColor: '#5a0060' } ]}>
                <Text style={{ fontSize: 20, color: Colors.white }}>Sign Up Now</Text>
              </View>
            </TouchableOpacity>

            <View style={{ position: 'absolute', top: 0, bottom: 0, right: 0, left: 0 }}>
              <ActivityIndicator animating={this.state.showLoader} size="small" color="#00ff00" />
            </View>
        </View>
    );
}

加载屏幕时，我将加载器动画设置为false。单击该按钮时，只能将其设置为true，该动画应该能够使加载程序动起来，但它不会出现。

Answer 1

我试图将您的代码简化为逻辑框架。我希望这会起作用，并且您可以开始添加样式等。

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

  showLoader = () => {
    this.setState({ isLoading: true });
  };

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

Answer 2

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

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

假设我们有6个屏幕，那么根据其他答案的方法，当我们可以全局处理它时，为什么要在每个屏幕（which was I am doing from last one year之后都去处理，所以我必须在所有6个屏幕中处理装载机。

我的新方法：

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()函数，而无需处理状态和加载程序处理。

Answer 3

问题在ActivityIndicator的位置。

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

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

Answer 4

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

我在这里提到一些关键更改：

视图结构

活动指示器视图中的位置

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

在react native中单击按钮时显示加载程序

4 个答案: