Изменить начальный маршрут после проверки

Question

Я изо всех сил пытаюсь найти решение моей проблемы, но пока безуспешно.

Моя идея такова: когда пользователь получает 6-значный код от API и нажимает confirm, страница перезагрузится и отправит его в основное приложение. Я посмотрел вокруг, есть ли какая-нибудь функция, которая может помочь мне решить мою проблему, но единственная идея, которая пока работает, - это связать кнопку из ValidationPage со стеком рутирования и дать функции onPress отправить пользователя на MainPage.js.

Но я считаю, что это неправильный способ сделать это. Так у кого-нибудь есть идеи, как решить эту проблему? Я буду рад, если кто-нибудь сможет мне помочь. Спасибо! Внешний вид страницы выглядит следующим образом:

LoginPage.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')
        }
    }
}

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

    }
}

Navigation.js

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import LoginScreen from './screens/LoginScreen';
import ValidationScreen from './screens/ValidationScreen';


export default createAppContainer( createStackNavigator (
    {
        Login: { screen: LoginScreen},
        Validation: { screen: ValidationScreen},

    },
    {
        headerMode: 'none'
    }


));