世博按钮单击后无任何作用

时间:2020-10-27 08:48:43

标签: reactjs react-native expo

我的按钮由于某种原因没有响应。你们能给我建议怎么做吗?

发生在我的屏幕上的样子如下:

import React from 'react';
import {
  View,
  ScrollView,
  Text,
  TextInput,
  Image,
  ActivityIndicator
} from 'react-native';

import * as SecureStore from 'expo-secure-store';
import User_context, {User_consumer} from '../../components/providers/user';
import Input from '../../components/input_default';
import Button from '../../components/button_signing_default';
import Notification from '../../components/notification';

import styles from './style';

export default class Sign_in extends React.Component {

  constructor() {
    super(...arguments);
  }

  state = {
    email : '',
    password : '',
    is_loading : false,
    error : {}
  };

  static navigationOptions = {
    title : 'Login',
    headerStyle : styles.nav,
    headerTintColor : '#fff',
    headerTitleStyle : styles.nav__title
  }

  UNSAFE_componentWillMount() {
    SecureStore.getItemAsync('email')
    .then(email => {
      if (!email) return false;
      this.setState({email});
    });
  }
  componentDidUpdate(prev_props) {
    const user = this.context;
    if (!!user.bearer) {
      SecureStore.setItemAsync('email', user.Email)
      .catch(err => {
        console.log('Error caching the email from user sign in');
        console.log(err);
      });
      this.props.navigation.navigate('Menu');
    };
  }
  render() {
    const user = this.context;
    return (
      <View style={styles.container}>
        {this.state.is_loading &&
          <View
            style={{
              position : 'absolute',
              top : 0,
              left : 0,
              flex : 1,
              width : '100%',
              height : '100%',
              justifyContent : 'center'
            }}
          >
            <ActivityIndicator size="large" color="#0000ff" />
          </View>
        }
        <View style={styles.title__wrapper}>
          <Text style={styles.title}>
            Login with email and password
          </Text>
        </View>
        <Input
          label="Email"
          value={this.state.email}
          onChangeText={(email) => this.setState({email})}
          keyboardType={'email-address'}
        />
        <Input
          label="Password"
          type="password"
          value={this.state.password}
          onChangeText={(password) => this.setState({password})}
        />
        <Button
          title="Login"
          icon="user"
          onPress={() => {
            const {email, password} = this.state;
            this.setState(
              {is_loading : true},
              () => {
                user.sign_in(email, password)
                .finally(response => {
                  if (!!response && response.data) {
                    this.setState({error : response, is_loading : false});
                    return false;
                  }
                });
              }
            );
          }}
        />
        <Button
          title="Register"
          icon="user-plus"
          onPress={() => this.props.navigation.navigate('Sign_up')}
        />
        <Button
          title="Forgotten password"
          icon="user-plus"
          onPress={() => this.props.navigation.navigate('Password_forget')}
        />
        {this.state.error.data &&
          <Notification
            notification={this.state.error}
            reset={() => this.setState({error : {}})}
          />
        }
      </View>
    );
  }
};

Sign_in.contextType = User_context;

唯一的问题是当我单击“注册”按钮时。我的注册屏幕如下所示:

import React from 'react';
import {
  View,
  ScrollView,
  Text,
  Image,
  StyleSheet,
  ActivityIndicator
} from 'react-native';
import { CheckBox } from 'react-native-elements';

import Input from '../../components/input_default';
import Button from '../../components/button_signing_default';

import Modal from '../../components/modal';

import styles from './style';

import DatePicker from 'react-native-datepicker';

import Notification from '../../components/notification';

import {User_consumer} from '../../components/providers/user';
import KeyboardSpacer from 'react-native-keyboard-spacer';

export default class Sign_up extends React.Component {

  constructor() {
    super(...arguments);
  }
  state = {
    checked_313 : false,
    error : {},
    is_loading : false,
    show_modal : false
  }

  static navigationOptions = {
    title : 'Register',
    headerStyle : styles.nav,
    headerTintColor : '#fff',
    headerTitleStyle : styles.nav__title
  }

  render() {
    return(

      <User_consumer>
      {(user) =>
        <React.Fragment>

        {this.state.is_loading &&
          <View
            style={{
              position : 'absolute',
              top : 0,
              left : 0,
              flex : 1,
              width : '100%',
              height : '100%',
              justifyContent : 'center'
            }}
          >
            <ActivityIndicator size="large" color="#0000ff" />
          </View>
        }
        <ScrollView
          contentContainerStyle={styles.container__wrapper}
        >

          <Input
            label="Name"
            value={user.FirstName}
            onChangeText={(firstName) => user.set('FirstName', firstName)}
            hasError={user.error.firstName}
          />
          <Input
            label="Family Name"
            value={user.LastName}
            onChangeText={(lastName) => user.set('LastName', lastName)}
            hasError={user.error.lastName}
          />
          <Input
            label="Email"
            value={user.Email}
            onChangeText={(email) => user.set('Email', email)}
            hasError={user.error.email}
            keyboardType={'email-address'}
          />
          <Input
            label="Address"
            value={user.ContactAddress}
            onChangeText={(contactAddress) => user.set('ContactAddress', contactAddress)}
            hasError={user.error.contactAddress}
          />
          <Input
            label="Phone"
            value={user.Phone}
            onChangeText={(phone) => user.set('Phone', phone)}
            hasError={user.error.phone}
          />
          <View
            style={{borderBottomColor : '#9ea3a5', borderBottomWidth : 1 }}
          >
            <Text
              style={[
                {
                  fontSize : 16,
                  color : '#9ea3a5',
                  fontWeight : 'bold'
                },
                user.error.birthDate ? {color : '#e35858'} : {}
              ]}
            >
              Дата на раждане
            </Text>
            <DatePicker
              style={
                {
                  paddingLeft : 0
                }
              }
              date={user.BirthDate}
              mode="date"
              format="DD/MM/YYYY"
              maxDate={new Date()}
              confirmBtnText="Save"
              cancelBtnText="Cancel"
              showIcon={false}
              onDateChange={(date) => user.set('BirthDate', date)}
              customStyles={{
                  dateText : {
                    color : '#9ea3a5',
                    fontSize : 18,
                    fontWeight : 'bold'
                  },
                  dateInput : {
                    borderWidth : 0,
                  }
              }}
            />
          </View>
          <Input
            label="Lorem ipsum"
            value={user.IdCard}
            onChangeText={(id_card) => user.set('IdCard', id_card)}
            keyboardType={'numeric'}
            hasError={user.error.idCard}
          />
          <Input
            label="Lorem ipsum"
            value={user.IdIssuedBy}
            onChangeText={(id_card_issued_by) => user.set('IdIssuedBy', id_card_issued_by)}

            hasError={user.error.idIssuedBy}
          />
          <View
            style={{borderBottomColor : '#9ea3a5', borderBottomWidth : 1 }}
          >
            <Text
              style={[
                {
                  fontSize : 16,
                  color : '#9ea3a5',
                  fontWeight : 'bold'
                },
                user.error.idIssueDate ? {color : '#e35858'} : {}
              ]}
            >
              Ipsum
            </Text>
            <DatePicker
              style={
                {
                  paddingLeft : 0
                  // marginTop : 10,
                  // marginLeft : 10,
                  // marginRight : 10
                }
              }
              date={user.IdIssueDate}
              mode="date"
              // placeholder={user.birth_date}
              format="DD/MM/YYYY"
              maxDate={new Date()}
              confirmBtnText="Save"
              cancelBtnText="Cancel"
              showIcon={false}
              onDateChange={(date) => user.set('IdIssueDate', date)}
              customStyles={{
                  // btnText : {
                  //   paddingHorizontal : 0
                  // },
                  dateText : {
                    color : '#9ea3a5',
                    fontSize : 18,
                    fontWeight : 'bold'
                  },
                  dateInput : {
                    borderWidth : 0,
                  }
              }}
            />
          </View>

          <View style={styles.title__wrapper}>
            <Text style={styles.title}>
              Ipsum
            </Text>
          </View>

          <Input
            label="Password"
            value={user.Password}
            onChangeText={(password) => user.set('Password', password)}
            hasError={user.error.password}
            type={'password'}
          />
          <Input
            label="Verify pass"
            value={user.ConfirmPassword}
            onChangeText={(confirmPassword) => user.set('ConfirmPassword', confirmPassword)}
            hasError={user.error.confirmPassword}
            type={'password'}
          />

          <View style={styles.title__wrapper}>
            <Text style={styles.title}>
              Lorem ipsum
            </Text>
            <CheckBox
              center
              title='Ipsum'
              checked={this.state.checked_313}
              onPress={() => this.setState(({checked_313}) => ({checked_313 : !checked_313}))}
            />
          </View>

          <Button
            title="Register"
            icon="user-plus"
            onPress={() => {
              if (this.state.checked_313) {
                user.sign_up()
                .then(response => {
                  console.log('RESPONSE sign_up')
                  console.log(response);
                  if (response.status === 200) {
                    this.setState({show_modal : true, is_loading : false});
                    return
                  }
                  this.setState({error : response, is_loading : false});
                });
                this.setState({is_loading : true});
              }
            }}
          />

          <KeyboardSpacer />

        </ScrollView>

        {this.state.error.data &&
          <Notification
            notification={this.state.error}
            reset={() => this.setState({error : {}})}
          />
        }

        <Modal
          show_modal={this.state.show_modal}
          title="Success"
          message="Success"
          onClose={() => {this.props.navigation.navigate('Sign_in')}}
        />
       </React.Fragment>
      }

      </User_consumer>

    );
  }

};

请帮助我解决此问题。我真的很努力去解决它。

0 个答案:

没有答案