Перенаправить на другой экран после входа в систему. (Реагируй Родной)

Question

Так что я отредактировал это с помощью всего одного файла, все есть, и все же я не могу заставить его работать.

Структура каталогов:

LoginScreen.js

import {  StackNavigator, } from 'react-navigation';
import DrawerScreen from '../Containers/Drawer.js';


// PJDS all-in
import HomeScreen from '../screens/HomeScreen.js';
import SettingsScreen from '../screens/SettingsScreen.js';

import { DrawerNavigator } from 'react-navigation';

const Navigation=DrawerNavigator({
  Dashboard: {
    screen: HomeScreen
  },
  Course: {
    screen: SettingsScreen
  },
})
// PJDS end

class LoginScreen extends Component {
constructor(props){
    super(props)
}
showLogin(props){
    let { onLogin, onLogout, onUser, handleSubmit, auth } = props
    if(auth.access_token === '') {
        return (
        <View >
            <Field style={styles.input} autoCapitalize="none" placeholder="Email Cu" component={TInput} name={'email'} />
            <Field style={styles.input} autoCapitalize="none" placeholder="Password" secureTextEntry={true} component={TInput} name={'password'} />
            <Button
                title = "Login"
                color = "#236CF5"
                style = {{backgroundColor:'#F8F8F8'}}
                onPress = {handleSubmit(onLogin)}
                />
        </View>
        )
    }
    else {
        return (
            <Navigation />
        )
    }

}
render(){
    return this.showLogin(this.props)
   }
}

После того, как я нажму на кнопку входа в систему, появится только пустой экран, ошибок нет, но если я проведу пальцем вправо, ящик не появится.

Я был бы рад, если кто-нибудь знает проблему здесь, спасибо.

Answer 1

Вы должны назначить ширину для вашего ящикаNavigator

const Navigation = DrawerNavigator({
    Home: {
        screen: Home
    },
    Login: {
        screen: LoginScreen,
    },
}, {
    drawerWidth: 300,
    drawerBackgroundColor: '#00234b',
    contentOptions: {
        inactiveTintColor: '#FAFAFA',
        activeTintColor: '#2bbfed',
        activeBackgroundColor: '#00152d',
        labelStyle: {
            fontFamily: 'Montserrat-Medium'
        }
    },
});

Чтобы получить доступ к вашему навигатору ящиков, вы должны сделать следующее:

.....
onPress={() => this.props.navigation.navigate('DrawerToggle')}

Answer 2

Переменная navigate не определена нигде в вашем методе.

Поскольку вы уже привязали свои экраны к react-navigation, навигатору , поэтому вы можете получить доступ к реквизитам this.props.navigation, которые, в свою очередь, имеют метод navigate.

let { {/* Other props */}, navigation } = props

...
onPress={()=> navigation.navigate('theDrawer')}