Question

如何将onLogout功能从 App 传递到 NavDrawer 到 SideMenu ？我不确定如何调整NavDrawer以从App读取onLogout道具并将其传递给SideMenu contentComponent。我需要从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

printf("%s", person.LastName);

NavApp.js

<div>
    <input type="text" (keyup)='filterDatatable($event)'> .
    <ngx-datatable
        class='bootstrap'
        [rows]='data'
        [columnMode]="'force'"
        [headerHeight]="100"
        [footerHeight]="0"
        [rowHeight]="38"
        [selected]="selected"
        [selectionType]="'checkbox'"
        [columns]="columnConfiguration"
        [scrollbarV]="true"
        [sorts]="[{ prop: 'sizeCode', dir: 'asc' }]"
        (select)='onSelect($event)'>
    </ngx-datatable>
</div>

NavDrawer.js

<div>
    <input type="text" (keyup)='filterDatatable($event)'> .
    <ngx-datatable
        class='bootstrap'
        [rows]='data'
        [columnMode]="'force'"
        [headerHeight]="100"
        [footerHeight]="0"
        [rowHeight]="38"
        [selected]="selected"
        [selectionType]="'checkbox'"
        [columns]="columnConfiguration"
        [limit]="5"
        [sorts]="[{ prop: 'sizeCode', dir: 'asc' }]"
        (select)='onSelect($event)'>
    </ngx-datatable>
</div>

SideMenu.js

<div>
    <input type="text" (keyup)='filterDatatable($event)'> .
    <ngx-datatable
        class='bootstrap'
        [rows]='data'
        [columnMode]="'force'"
        [headerHeight]="100"
        [footerHeight]="0"
        [rowHeight]="38"
        [selected]="selected"
        [selectionType]="'checkbox'"
        [columns]="columnConfiguration"
        [scrollbarV]="true"
        [sorts]="[{ prop: 'sizeCode', dir: 'asc' }]"
        (select)='onSelect($event)'>
    </ngx-datatable>
</div>

.ngx-datatable.scroll-vertical {
     max-height: 250px;
}

如果你们想知道我的制作方法 Login.js ，请在下面投票并发表评论。

如何从抽屉中注销（侧面菜单）

1 个答案: