navigate.dispatch (DrawerActions.closeDrawer ()) не работает в React Native

Question

При нажатии на крестовую кнопку ящик должен быть закрыт, это то, что я пытаюсь.Я передал реквизиты внутри компонента, но выдает ошибку, что navigate.dispatch (DrawerActions.closeDrawer ()) не определен.

Я предоставляю Мой код

SideMenu.js, который является макетом ящикаменю.Отсюда я передаю реквизиты в ящик заголовка.

import React, {Component} from 'react';
import { View, StyleSheet} from 'react-native';
import DrawerHeader from './DrawerHeader';
import DrawerMenu from './DrawerMenu';
import { StackNavigator  } from 'react-navigation';
class SideMenuLayout extends Component {
    state = {
        menuNames:[{
            id:'0',
            name:'My Profile',
            link:''
        },{
            id:'1',
            name:'Place Order',
            link:''
        },{
            id:'2',
            name:'Order History',
            link:'OrderHistory'
        },{
            id:'3',
            name:'Payment',
            link:''
        },{
            id:'4',
            name:'Recharge',
            link:''
        },{
            id:'5',
            name:'Help',
            link:''
        },{
            id:'6',
            name:'Logout',
            link:''
        }]
    }
    render () {
        return (
            <View style={styles.container} >
               <DrawerHeader navigation={this.props.navigation}/>
               <DrawerMenu 
                    navigation={this.props.navigation} 
                    menuItems={this.state} 
                    style={{ marginTop: 106/3}}
                />
            </View>
        );
    }
}

export default SideMenuLayout;

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

Код заголовка ящика идет сюда.Здесь я пытаюсь закрыть навигационную панель.

import React, {Component} from 'react';
import {Text, View, StyleSheet,Image,TouchableOpacity} from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { DrawerActions, StackNavigator } from 'react-navigation';
const DrawerHeader = (props)=> {

    const { navigate } = props.navigation;
        return (
            <View style={{backgroundColor: '#d61822',width:DRAWER_CONTAINER_WIDTH/3,height:DRAWER_CONTAINER_HEIGHT/3  }}>
                <View style={styles.titleContainer}>
                    <View style={{ marginLeft:20, backgroundColor:'#d61822',height:40 }}>
                        <Text style={{fontSize:28,fontStyle:'italic',color:'#ffff',fontWeight:'bold'}}>
                            Prabhuji Online
                        </Text>
                    </View>
                    <View style={{ marginLeft:35,backgroundColor:'#d61822',width: 50, height: 40,paddingRight:10,alignItems:'center',justifyContent:'center' }}>
                    <TouchableOpacity onPress={()=>navigate.dispatch(DrawerActions.closeDrawer())}>
                        <Text style={{fontSize:20,color:'#ffff',}}>
                            <FontAwesome 
                                style={{ alignSelf: 'flex-end'}} 
                                name="times" 
                                size={18} 
                                color="#ffffff" 
                            />
                        </Text>
                    </TouchableOpacity>
                    </View>
                </View>
                <View style={styles.fakeContainer}>

                </View>
                <View style={{
                        position:'absolute',
                        top: 170/3,
                        marginLeft:20,
                        width:220/3,
                        height:220/3,
                        backgroundColor:'#fffcf9',
                        borderRadius:(220/3)/2,
                        justifyContent:'center',
                        alignContent:'center',
                        alignItems:'center',
                        shadowColor: "#000",
                        shadowOffset: {
                            width: 0,
                            height: 5,
                        },
                        shadowOpacity: 0.25,
                        shadowRadius: 6.27,
                        elevation: 7,
                    }}>
                        <Image
                        tintColor='red'
                         style={{
                            width: 111/3,
                            height: 111/3,
                        }} 
                        source={require('../../../assets/place_order.png')}/>
                </View>
            </View>

        );
    }
export default DrawerHeader;


const styles = StyleSheet.create({
    titleContainer:{
        backgroundColor: '#d61822',
        flexDirection: 'row',
        height:TITLE_CONTAINER_HEIGHT/3,
        marginTop: 50/3,
    },
    fakeContainer:{
        position:'relative',
        height:FAKE_CONTAINER_HEIGHT/3,
        backgroundColor: '#ffffff',
        //backgroundColor: 'yellow',
    }
});

Может кто-нибудь сказать, что здесь происходит не так?Я также попробовал navigate.closeDrawer ().Но та же ошибка дает.

Answer 1

Вместо использования вызова navigate вам нужно отправить действие следующим образом: this.props.navigation.dispatch(*your action here*), как описано в документации: https://reactnavigation.org/docs/en/navigation-prop.html#dispatch-send-an-action-to-the-router