我的按钮由于某种原因没有响应。你们能给我建议怎么做吗?
发生在我的屏幕上的样子如下:
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>
);
}
};
请帮助我解决此问题。我真的很努力去解决它。