如何在条件反应中使用导航

Question

我是 React Native 的新手。我很困惑如何在本机反应中实现导航，但条件是在检查表单验证成功后导航将工作。这里我使用 react-native: 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') ??

目前只能做验证校验，校验成功不能移动页面

Answer 1

试试这个

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>
        )
    }
}

如何在条件反应中使用导航

How to use navigation in react native with condition

react-native

react-native-android