单击按钮时显示加载程序

debugcn 发表于 Dev

杰克23

我试图在单击按钮（进行注册）时获得加载程序，而不创建另一个页面（仅用于显示加载程序）。我能怎么做？？

这是我的代码以及我尝试过的内容（但没有出现）

class Signup extends Component {
  constructor(props) {
    super(props);
    this.state = {
     //code about signup
      isLoading: false
    };
  }

  showLoader = () =>{
    this.setState({ isLoading: true})
    this.registrazione()
  }
  registrazione() {
    //code about signup

  }

  render() {
    return (
      <View style={style.container}>
        //code about signup
          <View style={style.footer}>
            <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.showLoader()}
            >
              <Text style={[style.buttonTesto]}>Signup</Text>
            </TouchableOpacity>
            <ActivityIndicator animating={this.state.isLoading} size="large" color="#56cbbe" />
          </View>
        </KeyboardAwareScrollView>
      </View>
      </View>
    );
  }
}

克罗杰夫

首先，您有一个不需要的关闭View标记。假设这只是个问题，可以使用JS三元运算符来实现。像这样：

<View style={style.container}>
        //code about signup
          <View style={style.footer}>
            {(!this.state.isLoading) ? <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.showLoader()}
            >
              <Text style={[style.buttonTesto]}>Signup</Text>
            </TouchableOpacity> : <ActivityIndicator animating={this.state.isLoading} size="large" color="#56cbbe" />}
          </View>
        </KeyboardAwareScrollView>
</View>

您可以在此处了解有关三元运算符的更多信息

这应将按钮替换为加载动画。

如果有任何疑问，请随时询问！我很乐意提供帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。