验证后更改初始路线-react-native

Question

我正在努力寻找解决问题的方法，但还没有成功。

我的想法是：当用户从API接收6位代码并点击confirm时，页面将重新加载并将其发送到主应用程序。我环顾四周是否有任何函数可以帮助我解决问题，但是目前看来唯一可行的想法是将按钮从ValidationPage链接到生根堆栈，并赋予函数{{ 1}}，将用户发送到MainPage.js。

但是我认为这不是正确的方法。那么，有谁知道如何解决这个问题？如果有人可以帮助我，我会很高兴。谢谢！页面的外观如下所示：

LoginPage.js

onPress

ValidationPage.js

import React, { Component } from 'react';
import { Linking, Image, View, AsyncStorage, Dimensions } from "react-native";
import { Container, Icon, Text, Content, Button, Input, Item } from "native-base";

export default class LoginScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    state = {
        fontLoaded: false,
    }

    async componentWillMount() {
        await Expo.Font.loadAsync({
            Roboto: require("native-base/Fonts/Roboto.ttf"),
            Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
            Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf"),
        });

        this.setState({ fontLoaded: true });
    }

    render() {



        return (
            this.state.fontLoaded ? (
                <Container>
                    <Content>
                        <View style={{ alignContent: 'center', alignItems: 'center' }}>
                            <Image
                                style={{
                                    width: '60%',
                                    height: 200,
                                }}
                                source={require('../../assets/images/Shootlog.png')} />

                        </View>
                        <Text style={{ textAlign: 'center', lineHeight: 30, fontWeight: 'bold', fontSize: 20, color: 'grey' }}> Welcome to myShootLog</Text>
                        <Text style={{ textAlign: 'center', color: '#be0202' }}>Smart Shooting Solution for shooting ranges.</Text>
                        <Text style={{ padding: 20, textAlign: 'center', color: 'grey' }}> To continue , please fill in your email adress :</Text>


                        <View style={{ alignContent: 'center', alignItems: 'center', margin: 20 }}>

                            <Item style={{ marginBottom: 10 }}>
                                <Input 
                                    placeholder='example@mail.com' 
                                    onChangeText={(text) => this.validate(text)} 
                                    value={this.state.email} 
                                    keyboardType='email-address'
                                />
                                <Icon name={this.state.emailCheck} />
                            </Item>
                            <Button full onPress={() => this.props.navigation.navigate('Validation')} style={{ backgroundColor: '#e72a2e'}}>

                                <Text style={{ textTransform: 'uppercase', }}>{'send'.toUpperCase()}</Text>
                                <Icon name='arrow-forward' />

                            </Button>


                        </View>

                    </Content>
                    <View style={{ width: '100%', alignContent: 'center', position: 'absolute', top: footerTopPosition }}>
                        <Text style={{ color: 'grey', fontSize: 11, textAlign: 'center' }} >All Rights Reserved.® 2018 by CanDoIt </Text>
                        <Text style={{ color: 'grey', fontSize: 10, textAlign: 'center' }} onPress={() => Linking.openURL('http://candoit.be')}>www.candoit.be</Text>
                    </View>
                </Container>
            ) : null
        );

    }
    validate = (text) => {

        let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        if (reg.test(text) === false) {
            console.log('email is incorrect')
            this.setState({ emailCheck: 'close-circle' });

            return false;

        }
        else {
            this.setState({ emailCheck: 'checkmark-circle' })
            console.log('email is correct')
        }
    }
}

Navigation.js

import React, { Component } from 'react';
import { Linking, Image, View, AsyncStorage, Dimensions } from "react-native";
import { Container, Icon, Text, Content, Button, Input, Item } from "native-base";

export default class ValidationScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    state = {
        fontLoaded: false,
    }

    async componentWillMount() {
        await Expo.Font.loadAsync({
            Roboto: require("native-base/Fonts/Roboto.ttf"),
            Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
            Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf"),
        });

        this.setState({ fontLoaded: true });
    }

    render() {

        const { navigate } = this.props.navigation;

        return (
            this.state.fontLoaded ? (
                <Container>
                    <Content>
                        <View style={{ alignContent: 'center', alignItems: 'center' }}>
                            <Image
                                style={{
                                    width: '60%',
                                    height: 200,
                                }}
                                source={require('../../assets/images/Shootlog.png')} />

                        </View>
                        <Text style={{ textAlign: 'center', lineHeight: 30, fontWeight: 'bold', fontSize: 20, color: 'grey' }}> Welcome to NicoLog</Text>
                        <Text style={{ textAlign: 'center', color: '#be0202' }}>Smart Shooting Solution for shooting ranges.</Text>
                        <Text style={{ padding: 20, textAlign: 'center', color: 'grey' }}> Please fill in the 6 digits code from the email that you have recieved :</Text>


                        <View style={{ alignContent: 'center', alignItems: 'center', margin: 20 }}>

                            <Item style={{ marginBottom: 10 }}>
                                <Input
                                    placeholder='Ex. 910-519'
                                    onChangeText={(text) => this.validate(text)}
                                    value={this.state.email}
                                    keyboardType='number-pad'
                                />
                                <Icon name={this.state.emailCheck} />
                            </Item>

                            <Button full onPress={() => this.props.navigation.navigate('Main')} style={{ backgroundColor: '#e72a2e' }}>
                                <Icon name='checkmark-circle' />
                                <Text style={{ textTransform: 'uppercase' }}>{'confirm'.toUpperCase()}</Text>

                            </Button>
                            <Text style={{ padding: 20, textAlign: 'center', color: 'grey' }}>If you didn't recieved anything please click the button bellow.</Text>
                            <Button full style={{ backgroundColor: '#e72a2e' }}>
                                <Icon name='refresh' />
                                <Text style={{ textTransform: 'uppercase' }}>{'re-send'.toUpperCase()}</Text>
                            </Button>
                        </View>

                    </Content>
                    <View style={{ width: '100%', alignContent: 'center', position: 'absolute', top: footerTopPosition }}>
                        <Text style={{ color: 'grey', fontSize: 11, textAlign: 'center' }} >All Rights Reserved.® 2018 by CanDoIt </Text>
                        <Text style={{ color: 'grey', fontSize: 10, textAlign: 'center' }} onPress={() => Linking.openURL('http://candoit.be')}>www.candoit.be</Text>
                    </View>
                </Container>
            ) : null
        );

    }
    validate = (text) => {

        let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        if (reg.test(text) === false) {
            console.log('email is incorrect')
            this.setState({ emailCheck: 'close-circle' });

            return false;

        }
        else {
            this.setState({ emailCheck: 'checkmark-circle' })
            console.log('email is correct')
        }
    }


    callMain = () => {
        this.props.callParent(); // accsessing the function from the parent App.js

    }
}