反应导航不起作用

Question

我正在使用React Navigation中的Drawer Navigator，但是在创建自定义组件后，导航无法正常工作。导入没有问题。

    Here is the Code:-

    import React, { Component } from 'react';
    import {DrawerNavigator} from 'react-navigation';
    import {StyleSheet,Text,View,ScrollView,Image,Dimensions,TouchableOpacity} from 'react-native';
    import Ionicons from 'react-native-vector-icons/Ionicons'; 
    import HomeScreen from './components/HomeScreen/HomeScreen';
    import Home from './components/Home/Home';
    import Sample from './Sample';

    const{height,width}=Dimensions.get('window');

    const CustomDrawer = (props) => {
      return(
          <View>
            <View style={styles.list}>
              <TouchableOpacity onPress={()=>this.props.navigation.navigate('Sample')}>
                <View style={styles.listElements}>
                  <Ionicons name="md-home" size={25} color={'black'} style={styles.listIcons} />
                  <Text style={styles.listText}>Home</Text>
                </View>
              </TouchableOpacity>
            </View>
          </View>
        )
    }

    const Drawer = DrawerNavigator({
      HomeScreen: {
        screen: HomeScreen
      },
      Home:{
        screen:Home,
      },
      Sample:{
        screen:Sample,
      }
    },
      {
        drawerWidth: 350,
        contentComponent:CustomDrawer
    });



    export default class App1 extends React.Component {
      render() {
        return <Drawer />;
      }
    }

点击视图会引发“未定义不是对象（正在评估'_this.props.navigation'）”错误。