Как сделать выход из ящика (боковое меню)

Question

Как передать функцию onLogout из Приложение в NavDrawer в SideMenu ?Я не уверен, как настроить NavDrawer для чтения onLogout prop из приложения и передачи его в SideMenu contentComponent.Мне нужно выйти из SideMenu.

SideMenu

import React, { Component } from 'react';

export default class SideMenu extends Component {
    constructor(props) {
    super(props);

    // TODO: Receive onLogout from App
    console.log(this.props.onLogout);
}

NavDrawer.js

import { Dimensions } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';

import SideMenu from '../screens/SideMenu'
import Wizard from './NavWizard';
import Home from './NavHome';

const routeConfigs = {
    Wizard: { screen: Wizard },
    Home: { screen: Home }
}

const navConfigs = {
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width - 120,
}

const NavDrawer = createDrawerNavigator(routeConfigs, navConfigs);
const ContainerDrawer = createAppContainer(NavDrawer);

export default ContainerDrawer;

App.js

import React from 'react';
import { StyleSheet, View, AsyncStorage } from 'react-native';
import Guest from './navigations/NavGuest';
import Drawer from './navigations/NavDrawer';

const styles = StyleSheet.create({
    container: { flex:1, backgroundColor:'#ccc' }
});

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoading: true
        };
    }

    componentDidMount() {
        AsyncStorage.getItem('isLoggedin')
            .then((data) => {
                this.isLoggedin = data;

                this.setState({
                    isLoading: false
                });
            });
    }

    logout = () => {

    }

    render() {
        if (this.state.isLoading) {
            return (
                null
            )
        }
        else {
            console.log('isLoggedin: ' + this.isLoggedin);
            if (this.isLoggedin !== null && this.isLoggedin == 'true') {
                return (
                    <View style={styles.container}>     
                        <Drawer onLogout={() => this.logout()} />
                    </View>
                )
            }
            else {
                return (
                    <View style={styles.container}>     
                        <Guest />
                    </View>
                )
            }
        }
    }
}

Answer 1

Хорошо, мне удалось выйти из системы с помощью этой настройки:

App.js

import React from 'react';
import { StyleSheet, View, AsyncStorage } from 'react-native';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';

import NavApp from './navigations/NavApp';

const styles = StyleSheet.create({
    container: { flex:1, backgroundColor:'#ccc' }
});

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoading: true
        };
    }

    componentDidMount() {
        AsyncStorage.getItem('isLoggedin')
        .then((data) => {
            this.isLoggedin = data;

            this.setState({
                isLoading: false
            });
        });
    }

    render() {
        if (this.state.isLoading) {
            return (
                null
            )
        }
        else {
            console.log('isLoggedin: ' + this.isLoggedin);

            if (this.isLoggedin !== null && this.isLoggedin == 'true') {
                return (
                    <View style={styles.container}>
                        <NavApp initialRouteName='Drawer' />
                    </View>
                );
            }
            else {
                return (
                    <View style={styles.container}>
                        <NavApp initialRouteName='Guest' />
                    </View>
                );
            }
        } 
    }
}

NavApp.js

import React, { Component } from 'react';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';

import Guest from '../navigations/NavGuest';
import Drawer from '../navigations/NavDrawer';

const routeConfigs = {
    Guest: { screen: Guest },
    Drawer: { screen: Drawer }
}

let navConfigs = {
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    },
    initialRouteName:'Guest'
}

const AppContainerIn = (props) => {
    navConfigs.initialRouteName = props.initialRouteName;

    let switchNav = createSwitchNavigator(routeConfigs, navConfigs);
    let AppContainerOut = createAppContainer(switchNav);

    return <AppContainerOut />
}

export default class NavApp extends React.Component {
    render() {
        return (
            <AppContainerIn initialRouteName={this.props.initialRouteName}  />
        )
    }
}

NavDrawer.js

import { Dimensions } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';

import SideMenu from '../screens/SideMenu'
import Wizard from './NavWizard';
import Home from './NavHome';

const routeConfigs = {
    Wizard: { screen: Wizard },
    Home: { screen: Home },
}

const navConfigs = {
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width - 120,
}

const NavDrawer = createDrawerNavigator(routeConfigs, navConfigs);
const ContainerDrawer = createAppContainer(NavDrawer);

export default ContainerDrawer;

SideMenu.js

import React, { Component } from 'react';
import { StyleSheet, ScrollView, Text, View, Button, AsyncStorage } from 'react-native';
import { NavigationAction } from 'react-navigation';

const styles = StyleSheet.create({
    container: {
        paddingTop: 20,
        flex: 1
    },
    navItemStyle: {
        padding: 10
    },
    navSectionStyle: {
        backgroundColor: 'lightgrey'
    },
    sectionHeadingStyle: {
        paddingVertical: 10,
        paddingHorizontal: 5
    },
    footerContainer: {
        padding: 20,
        backgroundColor: 'lightgrey'
    }
})

export default class SideMenu extends Component {
    constructor(props) {
        super(props);

        this.navigation = props.navigation;
    }

    logout = () => {
        AsyncStorage.removeItem('isLoggedin');
        this.props.navigation.navigate('Guest');
    }

    navigateToScreen = (route) => {
        const navigateAction = NavigationActions.navigate({
            routeName: route
        });

        this.props.navigation.dispatch(navigateAction);
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView>
                <View>
                    <Text style={styles.sectionHeadingStyle}>
                    Section 1
                    </Text>
                    <View style={styles.navSectionStyle}>
                    <Text style={styles.navItemStyle} onPress={() => this.navigateToScreen('Page1')}>
                    Page1
                    </Text>
                    </View>
                </View>
                <View>
                    <Text style={styles.sectionHeadingStyle}>
                    Section 2
                    </Text>
                    <View style={styles.navSectionStyle}>
                    <Text style={styles.navItemStyle} onPress={() => this.navigateToScreen('Page2')}>
                        Page2
                    </Text>
                    <Text style={styles.navItemStyle} onPress={() => this.navigateToScreen('Page3')}>
                        Page3
                    </Text>
                    </View>            
                </View>
                <View>
                    <Text style={styles.sectionHeadingStyle}>
                    Section 3
                    </Text>
                    <View style={styles.navSectionStyle}>
                    <Text style={styles.navItemStyle} onPress={() => this.navigateToScreen('Page4')}>
                    Page4
                    </Text>
                    </View>
                </View>
                </ScrollView>
                <View style={styles.footerContainer}>
                    <Button title='Keluar' onPress={() => this.logout()} />
                </View>
            </View>
        )
    }
}

Если вы, ребята, хотите знать, как яmake Login.js , пожалуйста, проголосуйте и прокомментируйте ниже.