在 React Native 中单击按钮时显示加载器

Question

我正在尝试在我的本机反应应用程序中实现加载器动画，但是当单击按钮时它不会触发加载器，尽管动画已经更改为 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 这应该能够为加载程序设置动画但它没有出现。

原文由 Leon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 gazdagergo 发布，翻译遵循 CC BY-SA 4.0 许可协议