Question

我使用带有自定义内容组件的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，以显示退出对话框

Answer 1

可以使用简单的吐司代替使用对话框或警报框。使用react-native-toasty

并在注销时添加以下内容

<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>

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

希望这会有所帮助。

你很好！

反应导航抽屉contentComponent与屏幕通信

1 个答案: