React Navigation Drawer contentComponent 与屏幕通信答案

【问题标题】：React Navigation Drawer contentComponent communicate with screenReact Navigation Drawer contentComponent 与屏幕通信
【发布时间】：2019-06-25 03:36:36
【问题描述】：

我将 React Navigation Drawer 与自定义内容组件一起使用。下面是我创建抽屉导航的代码：

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

import DrawerContent from '../components/drawer/DrawerContent'
import MainScreen from '../layout/MainScreen';

const MyDrawerNavigator = createDrawerNavigator({
    MainDrawer: {
        screen: MainScreen
    },
},
    {
        initialRouteName: 'MainDrawer',
        contentComponent: DrawerContent,
        drawerWidth: Dimensions.get('window').width / 1.5,
        drawerPosition: 'left',
        gesturesEnabled: false,
    }
);

export default createAppContainer(MyDrawerNavigator);

在 DrawerContent 中，我创建了组件，其中包含更多项目。

export default class DrawerContent extends Component {

    onClickDrawerItems(type) {
        if (type == "Logout") {

            //I want to send a call back to MainScreen for showing a dialog           

        }
    }

    render() {
        return (
            <View style={Styles.drawerContainer}>
                {/* Header Drawer */}
                <ImageBackground
                    resizeMode='cover'
                    source={Assets.Image.im_logo_prasac}
                    style={Styles.headerDrawerImageBackground}>
                    <View style={Styles.headerBackgroundOverlay}>
                        ............
                    </View>
                </ImageBackground>

                <ItemsDrawer
                    icon={Assets.Icon.ic_logout}
                    title={Strings.DrawerItems.logout}
                    onClick={() => this.onClickDrawerItems("Logout")} />

            </View>
        );
    } 
}

在我的 onClickDrawerItems 函数中，如何将调用发送回 MianScreen 以显示注销对话框

【问题讨论】：

标签： react-native react-navigation react-navigation-drawer

【解决方案1】：

您可以使用简单的 toast，而不是使用对话框或警告框。使用react-native-toasty

并在注销时添加以下内容

onLogout() {
    await AsyncStorage.clear();
    RNToasty.Error({ title: 'You have been logged out.' })
    //this.props.navigation.navigate('SplashScreen')
}

您可以在注销后导航到您想要的任何屏幕。

希望这会有所帮助。

你可以走了！

【讨论】：