React Native Drawer

Question

React Navigation，抽屉的问题

所以，我的问题是：当我点击菜单图标时，抽屉没有打开，我使用react-navigation-drawer，我得到了错误信息。"TypeError:undefined is not an object (evalating 'navigation.navigate')"。这是我的代码。

import {createDrawerNavigator,NavigationActions} from 'react-navigation-drawer';
import {TouchableHighlight,View} from 'react-native';
import React from 'react';
import Icon from 'react-native-vector-icons/EvilIcons';
Icon.loadFont();

import Perfil from '../telas/perfil';
import Loja from '../telas/loja';
import Registrador from '../telas/registrador';
import Diy from '../telas/diy';
import QuemSomos from '../telas/quemSomos';
import Problemas from '../telas/problemas';

const DrawerScreen = createDrawerNavigator({
    Perfil:{screen: Perfil},
    Loja:{screen: Loja},
    Registrador:{screen: Registrador},
    Diy:{screen:Diy},
    QuemSomos:{screen:QuemSomos},
    Problemas:{screen:Problemas}
},{
    headerMode:'float'
})

const HeaderButton=(

    <View>
        <TouchableHighlight onPress={()=>navigation.navigate("drawerOpen")}>
            <Icon name="navicon" size={40} color="#FFF"/>
        </TouchableHighlight>    
    </View>

)

DrawerScreen.navigationOptions= {

    /*headerTitle:*/
    title: 'Waste Not',
    headerMode:'float',
    headerLeft: HeaderButton,
    headerTitleStyle:{
        textAlign:'center',
        flex: 1
    },
    headerStyle: {
        backgroundColor: '#aeead3',
    }, 
    headerTintColor: 'green',

}



export default DrawerScreen;

Answer 1

你能不能在导航之前用this.prop试试。

const HeaderButton=(

    <View>
        <TouchableHighlight onPress={()=>this.prop.navigation.navigate("drawerOpen")}>
            <Icon name="navicon" size={40} color="#FFF"/>
        </TouchableHighlight>    
    </View>

)