活动指标加载

Question

我有一个关于活动指示器的问题。在我的注册页面中，当点击注册按钮时，我放置了一个加载器。现在有一个问题，如果有人在字段中插入数据进行注册并且其中一些数据错误但单击注册按钮，则加载器中的按钮更改但无法再单击。唯一的解决方案是回到家中，然后再在页面中进行注册。我能怎么做？？所以问题是当按钮被点击时，因为如果某些字段错误即使更改数据也无法注册，因为密钥已经变成了加载器。<View style={style.inputContainer}>            <TextInput              style={style.inputs}              placeholder="Email"              placeholderTextColor="#56cbbe"              keyboardType="email-address"              underlineColorAndroid="grey"              onChangeText={Email => this.setState({ Email })}            />          </View>          <View style={style.inputContainer}>            <TextInput              style={[style.inputs]}              placeholder="Password"              placeholderTextColor="#56cbbe"              secureTextEntry={true}              underlineColorAndroid="grey"              onChangeText={Password => this.setState({ Password })}            />          </View>          <View style={style.inputContainer}>            <TextInput              style={style.inputs}              placeholder="Verifica Password"              placeholderTextColor="#56cbbe"              secureTextEntry={true}              underlineColorAndroid="grey"              onChangeText={PasswordRepeat => this.setState({ PasswordRepeat })}            />          </View>          <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" />}  // IT'S here!          </View>        </KeyboardAwareScrollView>非常感谢 ：）

Answer 1

一个快速的解决方法是在 textInput 发生变化时检查您的加载状态。

            <TextInput

              style={[style.inputs]}

              placeholder="Password"

              placeholderTextColor="#56cbbe"

              secureTextEntry={true}

              underlineColorAndroid="grey"

              onChangeText={ (Password) => {

                this.state.isLoading 

                ? 

                this.setState({ Password, isLoading: false })

                :

                this.setState({ Password })  

              }}

            />

这段代码没有经过测试，但它应该可以工作。对其余输入字段执行相同操作。

或者，如果您使用的是诸如 react-native-paper 之类的 UI 库，它们具有接受加载参数的按钮组件，您可以轻松切换该参数。