反应本机寄存器按钮问题

Question

在React Native应用程序中，当在会员条目和注册页面上错误输入信息时，该按钮将继续操作。该按钮不会再次激活以重新输入信息。你能帮忙吗？

换句话说，当信息不正确或缺少信息时，注册按钮正在连续旋转。

请查看屏幕截图和代码。

屏幕截图：

[！[使用UI] [1]] [1]

我的代码是：

import React from 'react';
import { StyleSheet, Text, View, Image, Dimensions, TextInput, TouchableOpacity, ActivityIndicator } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/Ionicons';
const { height, width } = Dimensions.get('window');
const LogoImg = require('../assets/img/challengelogo.png');
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scrollview'
import {connect} from 'react-redux';
import * as  appActions from './actions';
export class signupView extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            checkboxChecked: false,
            checkboxIcon: 'ios-square-outline'
        }
    }
    render() {
      const { container, innerContainer, innerImageContainer, buttonView , buttonViewRegister, innerButtonTextView, innerButtonView, termsView} = styles;
      return (
        <LinearGradient
          colors={['#f9a149', '#e86e52', '#d6375c']}
          style={ container }>
          <KeyboardAwareScrollView
          showsVerticalScrollIndicator={false}
          keyboardShouldPersistTaps="always"
          style={styles.scrollContainer}>
           <View  style={innerContainer}>
                <Image
                source={LogoImg}
                style={{ width: width*0.45, height: width*0.55 }}
                resizeMode={'contain'}
                />
                <View style={{flexDirection:'row', alignItems:'center'}}>
                    <Text style={{color:'#fff', fontSize:18, margin:10, textDecorationLine:'underline'}} >KAYIT OL</Text>
                </View>
                <View style={styles.searchSection}>
                    <Icon style={styles.searchIcon} name="ios-person-add" size={30} color="#000"/>
                    <TextInput
                        style={styles.input}
                        placeholder="Kullanıcı Adı"
                        underlineColorAndroid="transparent"
                        autoCapitalize = 'none'
                        autoCorrect = {false}
                        value = {this.props.r_name}
                        onChangeText={this._onNameChanged.bind(this)}
                        autoFocus = { true }
                        blurOnSubmit = { false }
                        returnKeyType = { "next" }
                        onSubmitEditing = {() => {this.mailTextInput.focus()} }
                    />
                </View>
                <View style={styles.searchSection}>
                    <Icon style={styles.searchIcon} name="ios-mail-outline" size={30} color="#000"/>
                    <TextInput
                        ref={(input) => { this.mailTextInput = input; }}
                        style={styles.input}
                        placeholder="Mail Adresi"
                        underlineColorAndroid="transparent"
                        keyboardType="email-address"
                        autoCapitalize = 'none'
                        autoCorrect = {false}
                        value = {this.props.r_email}
                        onChangeText={this._onEmailChanged.bind(this)}
                        blurOnSubmit = { false }
                        returnKeyType = { "next" }
                        onSubmitEditing = {() => {this.passwordTextInput.focus()} }
                    />
                </View>
                <View style={styles.searchSection}>
                    <Icon style={styles.searchIcon} name="md-lock" size={30} color="#000"/>
                    <TextInput
                        ref={(input) => { this.passwordTextInput = input; }}
                        style={styles.input}
                        placeholder="Şifre"
                        onChangeText={(searchString) => {this.setState({searchString})}}
                        underlineColorAndroid="transparent"
                        secureTextEntry={true}
                        autoCapitalize = 'none'
                        autoCorrect = {false}
                        value = {this.props.r_password}
                        onChangeText={this._onPasswordChanged.bind(this)}
                    />
                </View>
                { !this.props.isloadingSignup &&
                    <TouchableOpacity onPress={this._onSignUpPress}>
                        <View style={ [buttonView, buttonViewRegister]}>
                            <View style={innerButtonView}>
                                <Icon name="ios-person-add" size={30} color="#000" />
                            </View>
                            <View style={innerButtonTextView}>
                                <Text style={{ color:'#FFF', fontSize: 15}}>Kayıt Ol</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                    ||
                    <TouchableOpacity>
                        <View style={ [buttonView, buttonViewRegister]}>
                            <View style={innerButtonView}>
                                <Icon name="ios-person-add" size={30} color="#000" />
                            </View>
                            <View style={innerButtonTextView}>
                                <ActivityIndicator color="white" size='small'  />
                            </View>
                        </View>
                    </TouchableOpacity>
                }
                <TouchableOpacity onPress={this._onPressTerms}>
                        <View style={ [termsView]}>
                            <Icon name={this.state.checkboxChecked ? 'ios-checkbox': 'ios-square-outline'} size={30} color="#000" />
                            <Text style={{ color:'#FFF', fontSize: 15, marginLeft: 10}}><Text onPress={this._onPressTermsConditions } style={{ textDecorationLine: "underline"}}> Kullanım koşullarını</Text> Kabul Ediyorum.</Text>
                        </View>
                </TouchableOpacity>
            </View>
          </KeyboardAwareScrollView>
        </LinearGradient>
      );
    }
    _onSignUpPress = () => {
        if(this.state.checkboxChecked) {
            var registerBody = {
                email: this.props.r_email,
                password: this.props.r_password,
                password_confirmation: this.props.r_password,
                name: this.props.r_name
            };
            this.props.dispatch(appActions.register(registerBody));
        } else {
            alert("Lütfen önce Kullanıcı şartlarını kabul edin.");
        }
    }
    _onEmailChanged = (email) => {
        this.props.dispatch(appActions.emailChanged(email));
    }
    _onNameChanged = (name) => {
        this.props.dispatch(appActions.nameChanged(name));
    }
    _onPasswordChanged = (password) => {
        this.props.dispatch(appActions.passwordChanged(password));
    }
    _onPressTerms = () => {
        this.setState({ checkboxChecked: !this.state.checkboxChecked })
    }
    _onPressTermsConditions = () => {
        this.props.navigator.push({
            screen: 'challenge.TermsOfUse',
            navigatorStyle: {
              navBarHidden: true
            }
          });
    }
}
const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'flex-start',
    },
    scrollContainer:{
      flex: 1,
    },
    innerContainer:{
      flexDirection:'column',
      alignItems:'center',
      marginTop: height*0.08,
    },
    searchSection: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
        width:width*0.7,
        marginTop:7
    },
    searchIcon: {
        paddingTop:5,
        paddingBottom:5,
        paddingLeft:10,
        paddingRight:10
    },
    input: {
        flex: 1,
        backgroundColor: '#fff',
        color: '#424242',
        justifyContent:'center',
    },
    buttonView:{
        width: width*0.7,
        marginTop:20,
        flexDirection:'row',
      },
    buttonViewRegister:{
        backgroundColor:"#2b74a7"
    },
    innerButtonView:{
        backgroundColor:'#bab9b9',
        width:45,
        height:42,
        justifyContent:'center',
        alignItems:'center'
      },
    innerButtonTextView:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
      },
      termsView:{
        width: width*0.8,
        marginTop:20,
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center'
      }
  });
  const mapStateToProps = ({ signup }) => {
    return { r_email, r_password, r_name, isloadingSignup } = signup;
  };
  export default connect(mapStateToProps)(signupView);

首先，感谢您的回复。我无法将代码放在这里，因为它越过了字符限制。因此，您可以从此链接中查看操作内容。http://karahankaraman.com/actions/index.js

Answer 1

我认为您的注册页面过于复杂。您是否真的需要派遣到Redux来处理您的注册逻辑？如果继续，您可能需要向我们展示您的actions.js文件。同时这样做：

{ !this.props.isloadingSignup ?
                        <TouchableOpacity onPress={this._onSignUpPress}>
                            <View style={ [buttonView, buttonViewRegister]}>
                                <View style={innerButtonView}>
                                    <Icon name="ios-person-add" size={30} color="#000" />
                                </View>
                                <View style={innerButtonTextView}>
                                    <Text style={{ color:'#FFF', fontSize: 15}}>Kayıt Ol</Text>
                                </View>
                            </View>
                        </TouchableOpacity>
                        :
                        <View style={ [buttonView, buttonViewRegister]}>
                            <View style={innerButtonView}>
                                <Icon name="ios-person-add" size={30} color="#000" />
                            </View>
                            <View style={innerButtonTextView}>
                                <ActivityIndicator color="white" size='small'  />
                            </View>
                        </View>
                    }