Как использовать навигацию в соответствии с условиями - PullRequest
Новая
       5

Как использовать навигацию в соответствии с условиями

0 голосов
/ 04 марта 2020

я новичок в реакции на родную. я запутался, как реализовать навигацию в реагировать на родной, но с условием, что навигация будет работать после проверки проверки формы успешно. здесь я использую реактивный: 0,61,5 

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

export default class Apps extends Component{

    state = {
        username: '',
        emailAddress: '',
        password: '',
        msgValidasi: '',
    };

    checkValidasi = () => {
        let email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;

        if(this.state.username.trim() === '' && this.state.emailAddress.trim() === '' && this.state.password.trim() === ''){
            this.refs.alertNull.open()
            this.setState({ msgValidasi: 'Please Fill in the Form Below!' })

        }else if(this.state.username.trim() === ''){
            this.refs.alertNull.open()
            this.setState({ msgValidasi: 'Please Fill in Your Username!' })

        }else if(this.state.emailAddress.trim() === ''){
            this.refs.alertNull.open()
            this.setState({ msgValidasi: 'Please Fill in Your Email Address!' })

        }else if(email.test(this.state.emailAddress) === false) {
            this.refs.alertNull.open()
            this.setState({ msgValidasi: 'Incorrect Email Format!' })

        }else if(this.state.password.trim() === ''){
            this.refs.alertNull.open()
            this.setState({ msgValidasi: 'Please Fill in Your Password!' })

        }else if(this.state.password.length < 6){
            this.refs.alertNull.open()
            this.setState({ msgValidasi: 'Password At least 6 characters!' })
        }else{
            this.setState({ msgValidasi: 'success' })
        }

    render(){
        return(   
             <View style={{alignItems: 'center'}} >
                  <LinearGradient
                      colors={['#8b9cea','#657eee','#637cee', '#485aee']}
                      start={{x: 0.0, y: 1.0}} end={{x: 1.0, y: 2.0}}
                      style={{width: 150, borderRadius: 20}} >

                          <TouchableWithoutFeedback onPress={this.checkValidasi}>
                               <Text style={{
                                   textAlign: 'center',
                                   padding: 10,
                                   color: 'white',
                                   fontWeight: 'bold'}} >Sign Up</Text>
                          </TouchableWithoutFeedback>

                   </LinearGradient>
              </View>
        )
    }
}

при нажатии клавиши onPress будет запущен метод проверки checkValidasi(). в случае успеха страница переместится на example.js. где я должен реализовать этот код () => this.props.navigation.navigate ('Home') ??

до сих пор я могу выполнять только проверку проверки, но я не могу перемещать страницы, когда проверка прошла успешно

1 Ответ

1 голос
/ 04 марта 2020

Попробуйте это 

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

export default class Apps extends Component{

    state = {
        username: '',
        emailAddress: '',
        password: '',
        msgValidasi: '',
    };

    checkValidasi = () => {
        let email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;

        if(this.state.username.trim() === '' && this.state.emailAddress.trim() === '' && this.state.password.trim() === ''){
            this.refs.alertNull.open()
            this.setState({ msgValidasi: 'Please Fill in the Form Below!' })

        }else if(this.state.username.trim() === ''){
            this.refs.alertNull.open()
            this.setState({ msgValidasi: 'Please Fill in Your Username!' })

        }else if(this.state.emailAddress.trim() === ''){
            this.refs.alertNull.open()
            this.setState({ msgValidasi: 'Please Fill in Your Email Address!' })

        }else if(email.test(this.state.emailAddress) === false) {
            this.refs.alertNull.open()
            this.setState({ msgValidasi: 'Incorrect Email Format!' })

        }else if(this.state.password.trim() === ''){
            this.refs.alertNull.open()
            this.setState({ msgValidasi: 'Please Fill in Your Password!' })

        }else if(this.state.password.length < 6){
            this.refs.alertNull.open()
            this.setState({ msgValidasi: 'Password At least 6 characters!' })
        }else{
            // this.setState({ msgValidasi: 'success' })
            this.props.navigation.navigate ('Home')
        }

    render(){
        return(   
             <View style={{alignItems: 'center'}} >
                  <LinearGradient
                      colors={['#8b9cea','#657eee','#637cee', '#485aee']}
                      start={{x: 0.0, y: 1.0}} end={{x: 1.0, y: 2.0}}
                      style={{width: 150, borderRadius: 20}} >

                          <TouchableWithoutFeedback onPress={this.checkValidasi}>
                               <Text style={{
                                   textAlign: 'center',
                                   padding: 10,
                                   color: 'white',
                                   fontWeight: 'bold'}} >Sign Up</Text>
                          </TouchableWithoutFeedback>

                   </LinearGradient>
              </View>
        )
    }
}
...