React native 如何在react native with condition中使用导航

我是新来的。我不知道如何在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>
        )
    }
}

import React，{Component}来自'React'；
从“react native”导入{Text，View}；
导出默认类应用程序扩展组件{
状态={
用户名：“”，
电子邮件地址：“”，
密码：“”，
msgValidasi:“”，
};
checkValidasi=（）=>{
让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:'请填写下表！'}）
}else if（this.state.username.trim（）=''）{
this.refs.alertNull.open（）
this.setState（{msgValidasi:'请填写您的用户名！'}）
}else if（this.state.emailAddress.trim（）=''）{
this.refs.alertNull.open（）
this.setState（{msgValidasi:'请填写您的电子邮件地址！'}）
}else if（email.test（this.state.emailAddress）==false）{
this.refs.alertNull.open（）
this.setState（{msgValidasi:'不正确的电子邮件格式！'}）
}else if（this.state.password.trim（）=''）{
this.refs.alertNull.open（）
this.setState（{msgValidasi:'请填写您的密码！'}）
}else if（this.state.password.length<6）{
this.refs.alertNull.open（）
this.setState（{msgValidasi:'密码至少6个字符！'}）
}否则{
this.setState（{msgValidasi:'success'}）
}
render（）{
报税表（
注册
)
}
}

按下onPress键时，它将运行check

checkValidasi（）

方法。如果成功，则页面将移至for

example.js

。 我应该在哪里实现这个代码

（）=>this.props.navigation.navigate（'Home'）

到目前为止，我只能进行验证检查，但检查成功后我无法移动页面

试试这个

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

import React，{Component}来自'React'；
从“react native”导入{Text，View}；
导出默认类应用程序扩展组件{
状态={
用户名：“”，
电子邮件地址：“”，
密码：“”，
msgValidasi:“”，
};
checkValidasi=（）=>{
让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:'请填写下表！'}）
}else if（this.state.username.trim（）=''）{
this.refs.alertNull.open（）
this.setState（{msgValidasi:'请填写您的用户名！'}）
}else if（this.state.emailAddress.trim（）=''）{
this.refs.alertNull.open（）
this.setState（{msgValidasi:'请填写您的电子邮件地址！'}）
}else if（email.test（this.state.emailAddress）==false）{
this.refs.alertNull.open（）
this.setState（{msgValidasi:'不正确的电子邮件格式！'}）
}else if（this.state.password.trim（）=''）{
this.refs.alertNull.open（）
this.setState（{msgValidasi:'请填写您的密码！'}）
}else if（this.state.password.length<6）{
this.refs.alertNull.open（）
this.setState（{msgValidasi:'密码至少6个字符！'}）
}否则{
//this.setState（{msgValidasi:'success'}）
this.props.navigation.navigate（'Home'））
}
render（）{
报税表（
注册
)
}
}

只需将

this.props.navigation.navigate（'Home'）

作为调用

this.setState（{msgValidasi:'success'}）

wow，这很管用。实际上我以前应用过这个，但我像这样应用它

（）=>this.props.navigation（'Home'））

但它不起作用。我也没想到要删除这个部分

（）=>

。谢谢@SDushan