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

Question

Я пытался создать приложение, которое перейдет на экран входа в систему после заставки.Когда пользователь входит в систему, он должен быть направлен на экран, на котором есть навигация по ящикам и вкладки.Я пытался реализовать это, используя реагировать родной экспо.Работает нормально на выставке.Но как только я создаю APK и пытаюсь использовать его, после входа в систему он перенаправляет всплеск и войти, не показывая никакого контента.Я использовал пакет реагировать на навигацию для навигации между экранами

Мой Navigator.js:

import React from 'react';
import { createAppContainer, createDrawerNavigator, createStackNavigator } from 'react-navigation';
import SplashScreen from '../screens/SplashScreen';
import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';
import Screen3 from '../screens/Screen3';
import MainDrawer from '../common/MainDrawer';

const LoginNavigator = createStackNavigator({
    splash: SplashScreen
}, {
        headerMode: 'none',
        navigationOptions: {
            headerVisibile: false,
        }
    });

const DrawerNavigator = createDrawerNavigator({
    screen1: Screen1,
    screen2: Screen2,
    screen3: Screen3,

}, {
        initialRouteName: 'screen1',
        contentComponent: props => <MainDrawer {...props} />,
        drawerWidth: 350,
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false,
        }
    });


const TotalNavigator = createStackNavigator({
    loginStack: { screen: LoginNavigator },
    drawerStack: { screen: DrawerNavigator },
}, {
        headerMode: 'none',
        initialRouteName: 'loginStack',
        navigationOptions: {
            headerVisible: false,
        }
    })

PrimaryNavigator = createAppContainer(TotalNavigator);


export default PrimaryNavigator;

Мой MainDrawer.js:

import React from 'react';
import { View, Text } from 'react-native';
import Image from 'react-native-remote-svg';

export default class MainDrawer extends React.Component {

    constructor(props) {
        super(props);
    }

    static navigationOptions = {
        header: null,
    };
    render() {
        return (
            <View style={{ width: '100%', height: '100%', backgroundColor: '#2C2663' }}>
                <View style={{ left: '7%', top: '10%' }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                        <Image source={require('../assets/images/user_pic.svg')} />
                        <Text style={{ color: '#fff', fontSize: 25, flexDirection: 'row', left: '-28%', top: '10%' }}> SomeOne</Text>
                    </View>
                    <View style={{ width: '80%', borderBottomWidth: 1, borderBottomColor: '#C0C0C0', top: '20%' }} />
                    <Text style={{ color: '#C0C0C0', fontSize: 11, top: '30%' }}>
                        {`Some dummy text`}</Text>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', top: '40%' }}>
                        <Image style={{ width: 30, height: 30 }} source={require('../assets/images/icon.svg')} />
                        <Text style={{ color: '#fff', fontSize: 20, flexDirection: 'row', left: '-40%', top: '10%' }}
                            onPress={() => this.props.navigation.navigate('screen1')}> Screen 1 </Text>
                    </View>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', top: '50%' }}>
                        <Image style={{ width: 30, height: 30 }} source={require('../assets/images/icon2.svg')} />
                        <Text style={{ color: '#fff', fontSize: 20, flexDirection: 'row', left: '-42%', top: '10%' }}
                            onPress={() => this.props.navigation.navigate('screen2')}
                        > Screen 2</Text>
                    </View>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', top: '60%' }}>
                        <Image style={{ width: 30, height: 30 }} source={require('../assets/images/icon3.svg')} />
                        <Text style={{ color: '#fff', fontSize: 20, flexDirection: 'row', left: '-16%', top: '10%' }}
                         onPress={() => this.props.navigation.navigate('screen3')}
                        > Screen 3</Text>
                    </View>

                </View>
            </View>);
    }
}

Мой SplashScreen.js:

import React from 'react';
import { Animated } from 'react-native';
import LottieView from 'lottie-react-native';
import LoginScreen from './LoginScreen.js';

export default class SplashScreen extends React.Component {

    constructor(props) {
        super(props);
        this.state = { isAnimationVisible: true, animationProgress: new Animated.Value(0) };
        this.homeScreen = this.homeScreen.bind(this);
    }

    static navigationOptions = {
        header: null,
    };

    componentDidMount() {
        Animated.timing(this.state.animationProgress, { toValue: 1, duration: 15000 })
            .start(() => this.setState(s => ({ ...s, isAnimationVisible: false })));
    }

    //Navigate to Home screen
    homeScreen() {
        this.props.navigation.navigate('drawerStack');
    }

    render() {
        if (this.state.isAnimationVisible) {
            const interpolation = this.state.animationProgress.interpolate({ inputRange: [0, 1], outputRange: [0, 1] });
            return (
                <LottieView
                    source={require('../assets/animations/splash.json')}
                    progress={interpolation}
                    autoPlay
                    loop={false}
                    resizeMode='cover'
                />
            );
        }
        else {
            return (<LoginScreen goToHome={this.homeScreen} />);
        }
    }
}

Мой LoginScreen.js:

import React from 'react';
import { View, Image, Text, TextInput, KeyboardAvoidingView, ActivityIndicator } from 'react-native';
import { Button } from 'native-base';
import loginStyles from '../styles/loginStyles';


class LoginScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',

        };
        this.onButtonPress = this.onButtonPress.bind(this);
    }

    static navigationOptions = {
        header: null,
    };


    onButtonPress() {

        let Users = list of users;
        for (let i = 0; i < Users.length; i++) {
            if ((Users[i].username == this.state.email) && (Users[i].password = this.state.password)) {
                this.props.goToHome();
            }

    }



    render() {
        // On pressing login after giving credentials this.onButtonPress() is called

    }
}

export default LoginScreen;

Может кто-нибудь указать, где проблема, и предложить решение?Заранее спасибо.

Answer 1

Вместо создания TotalNavigator в качестве StackNavigator используйте SwitchNavigation вместо корня, например:

SwitchNavigator
|
|-SplashScreen   # Create this as single screen no need to create Stack, initial screen
|
|-LoginNavigator
|
|-DrawerNavigator

Затем в LoginScreen просто перейдите к MainDrawer напрямую, он будет обрабатыватьа также жми на спину.