Android 使用Redux表单提交表单和显示加载微调器进行本机反应_Android_Reactjs_React Native_Redux Form

Android 使用Redux表单提交表单和显示加载微调器进行本机反应

android reactjs react-native

Android 使用Redux表单提交表单和显示加载微调器进行本机反应,android,reactjs,react-native,redux-form,Android,Reactjs,React Native,Redux Form,我对React Native非常陌生，我正在用它构建我的第一个应用程序。现在我可以使用Redux表单登录到我的API，现在我想在登录过程中添加一个加载微调器为此，我使用这个库，它使得添加spiiner非常容易问题是，当我单击login按钮时，只有微调器显示，实际的登录函数永远不会执行，如果我移除微调器，那么登录就可以工作这是我的代码： import React, { Component } from 'react' import { Form, Field, reduxForm } fro

我对React Native非常陌生，我正在用它构建我的第一个应用程序。现在我可以使用Redux表单登录到我的API，现在我想在登录过程中添加一个加载微调器

为此，我使用这个库，它使得添加spiiner非常容易

问题是，当我单击login按钮时，只有微调器显示，实际的登录函数永远不会执行，如果我移除微调器，那么登录就可以工作

这是我的代码：

import React, { Component } from 'react'
import { Form, Field, reduxForm } from 'redux-form';
import { StyleSheet, View, Text, TextInput, Button, Image } from 'react-native'
import Spinner from 'react-native-loading-spinner-overlay';
import TInput from './TInput'

class LoginScreen extends Component {
    state = {
        loading: false,
    };
    constructor(props){
        super(props);
        this.state = {
            show: false
        };
    }
    loginEndpointDecider = () => {
        this.setState({show: true})  ;
    }
    showLogin(props){
        let { onLogin, onLogout, onUser, handleSubmit, auth } = props
        if(auth.access_token === '') {
            return (
            <View style={styles.container}>
                <Spinner
                //visibility of Overlay Loading Spinner
                visible={this.state.show}
                //Text with the Spinner
                textContent={'Iniciando Sesión...'}
                //Text style of the Spinner Text
                textStyle={styles.spinnerTextStyle}
                //Animation for the spinner
                animation={"fade"}
                />
                    <Image style={{width: 210, height: 55}} source={require('../resources/images/logo-wallet.png')}
                        />
                    <Field style={styles.input} autoCapitalize="none" placeholder="Cédula o RIF" component={TInput} name={'cedula'} />
                    <Field style={styles.input} autoCapitalize="none" placeholder="Clave" secureTextEntry={true} component={TInput} name={'password'} />
                    <Button
                        title = "Iniciar Sesión"
                        color = "#fab207"
                        style = {{backgroundColor:'#fab207'}}
                        onPress = {() => {
                            this.loginEndpointDecider();
                            handleSubmit(onLogin);
                        }}
                        />
            </View>
            )
        }
        else {
            return (
                <View style={styles.container}>
                    <Text>{auth.email}</Text>
                    <Button title="My Info" color= "#fab207" onPress={()=>onUser(auth)}/>
                    <Text style={{fontWeight:'bold'}}>{auth.name}</Text>
                    <Button title="Logout" color= "#fab207" onPress={()=>onLogout()}/>
                </View>
                )
        }

    }
    render(){
        return this.showLogin(this.props)
   }
}

export default reduxForm({ form: 'login' })(LoginScreen);

const styles = StyleSheet.create({
    container: {
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    },
    input:{
        height:40,
        width:300,
        padding:5,
        borderWidth:0,
        borderBottomWidth:2,
        borderBottomColor:'#fab207',
        borderColor:'#fff',
        margin:10
    },
    spinnerTextStyle: {
        color: '#FFF',
    },
})

如果我只执行

onPress={handleSubmit（onLogin）}

，那么在回答您的问题之前，它可以工作

，我想提到的是，在您定义了组件的两次状态。一次作为

state={}

使用，第二次在

Constructor

中使用，您可以将两个状态参数

{loading:false，show:false}

保留为其中一个

现在谈谈你的问题：

onPress={handleSubmit（onLogin）}

此语法完全正确，因为您将

handleSubmit

函数作为道具传递，并且使用的是箭头函数语法。您可以在此处阅读更多信息：

我给大家举一个简单的例子来了解这里发生了什么：

import React, {Component} from 'react';
import {View,TouchableOpacity} from 'react-native';

class Test extends Component {

    handleSubmit=()=>{
        console.log('I am handleSubmit');
    }

    render() {
        return (
            <View>
                <TouchableOpacity
                onPress={this.handleSubmit}
                />
            </View>
        );
    }
}

export default Test;

第三种方法是绑定函数，这是一种古老的方法，不是ES6的语法：

import React, {Component} from 'react';
import {View,TouchableOpacity} from 'react-native';

class Test extends Component {

    handleSubmit(){
        console.log('I am handleSubmit');
    }

    render() {
        return (
            <View>
                <TouchableOpacity
                onPress={this.handleSubmit.bind(this)}
                />
            </View>
        );
    }
}

export default Test;

import React，{Component}来自'React'；
从“react native”导入{View，TouchableOpacity}；
类测试扩展了组件{
handleSubmit（）{
log（'I am handleSubmit'）；
}
render（）{
返回(
);
}
}
导出默认测试；

我希望这是有帮助的。如果它对您有效，请投票支持我：）

在我回答您的问题之前，我想在您定义的组件状态中提到两次。一次作为

state={}