我有一个 React Native IOS 应用程序，在导航到另一个页面时出现未定义的错误。

下面是我声明了“设置”屏幕的导航器。

FRNavigator.js

import React from 'react';
import { View,StyleSheet,SafeAreaView,Button,ScrollView,Text} from 'react-native';
import { createSwitchNavigator,createAppContainer } from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import MainPage from '../screens/FaceRecog/MainPage';
import UploadPage from '../screens/FaceRecog/UploadPage';
import { createDrawerNavigator,DrawerItems} from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/Ionicons';
import DownloadPage from '../screens/FaceRecog/DownloadPage';
import ForgotPasswordScreen from '../screens/UI/ForgotPasswordScreen';
import ImageBrowserScreen from '../screens/FaceRecog/ImageBrowserScreen';
import LoginScreen from '../screens/UI/LoginScreen';
import RegisterScreen from '../screens/UI/Register';
import AddDevicePage from '../screens/FaceRecog/AddDevicePage';
import LogoutComponent from '../components/FaceRecog/LogoutComponent'
import DrawerHeader from '../components/FaceRecog/DrawerHeader';
import CommunicateComponent from '../components/FaceRecog/CommunicateComponent';
import ManageDevice from '../screens/FaceRecog/ManageDevicePage';
import Register from '../screens/UI/Register';
import { Settings } from '../screens/FaceRecog/Settings';

 const AuthNavigator = createStackNavigator(
{
Login:
{
 screen:LoginScreen,
 navigationOptions: {
  headerShown: false,
}
},
SignUp:
{
 screen:Register,
},
ForgotPasswordPage:ForgotPasswordScreen
},
);

const MainPageNavigator = createStackNavigator({
Home:MainPage,
AddDevice:AddDevicePage,
Upload:UploadPage,
ImagePicker:ImageBrowserScreen,
ManageDev:ManageDevice
})
const DrawerNavigator = createDrawerNavigator(
{

Home:
{
  screen:MainPageNavigator,
  navigationOptions:{
    drawerIcon:(
      <Icon
      name='md-home-sharp' size={25}  color='grey'/>
    )
  }
},

Download:
{
  screen:DownloadPage,
  navigationOptions:{
    drawerIcon:(
      <Icon
      name='md-download'
      type='ionicons' size={25} color='grey'onPress={ () => {
     
    }}/>
  
    )
  }
},
Exit:
{
  screen:Register,
  navigationOptions:{
    drawerIcon:(
      <Icon
      name='exit-outline'
      type='ionicons' size={25} color='grey' onPress={ () => {    
    }}/>
    )
    }
    } 
    },
    {
     contentOptions:{
     activeTintColor: '#e91e63',
     }
     ,  contentComponent: props => 
   <ScrollView>
   <SafeAreaView style={{flex:1}} forceInset={{ top: 'always', horizontal: 'never', 
     height:180 }}>
    <View style={{width:'100%', backgroundColor: 'white', }}> 
      <DrawerHeader />
    </View>
    <DrawerItems {...props} />
    <LogoutComponent />
    <View
                    style={{
                    borderBottomColor: 'grey',
                    borderBottomWidth: 1

                }}/> 
                <View style={styles.communicateview}>
    <Text style={styles.communicatetext}>Communicate</Text>
    <CommunicateComponent />
    </View>
    </SafeAreaView>
   </ScrollView>,  
   },
   {
   Setting:Settings
   },
   );


  const MainNavigator = createSwitchNavigator({
  Auth: AuthNavigator,
  App:DrawerNavigator
  });

  const styles = StyleSheet.create({
  communicatetext:{
   fontWeight:'800',
   color:'grey'
  },
  communicateview:{
    top:'3%',
    left:'3%'
  }
  })

  export default createAppContainer(MainNavigator);

下面是抽屉中的 CommunicateComponent，我在其中调用 props.navigation.navigate()。

CommunicateComponent.js

import React from 'react';
import { Platform, TouchableOpacity, Alert, View, Text, StyleSheet ,ScrollView} from 
'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

export default class CommunicateComponent extends React.Component {
navigateTo = (routeName) => {
    this.props.navigation.navigate(routeName)
  }

render() {
return(
<View>
  <View>
    <View style={styles.iconview}>
      <Icon
  name='settings'
  type='ionicons' size={25}  color='grey'/>
    </View>
    <TouchableOpacity style={styles.logoutview} 
 onPress={this.navigateTo('Setting')}
  >
   <Text style={styles.settingstext}> Settings </Text></TouchableOpacity>
   </View>
   <View>
    <View style={styles.iconview}>
      <Icon
  name='md-heart-circle'
  type='ionicons' size={25}  color='grey'/>
    </View>
    <TouchableOpacity style={styles.logoutview} 
  >
   <Text style={styles.settingstext}> Rate Us </Text></TouchableOpacity>
   </View>
   <View>
    <View style={styles.iconview}>
      <Icon
  name='ios-share-social'
  type='ionicons' size={25}  color='grey'/>
    </View>
    <TouchableOpacity style={styles.logoutview} 
  >
   <Text style={styles.settingstext}> Share </Text></TouchableOpacity>
   </View>
   <View>
    <View style={styles.iconview}>
      <Icon
  name='information-circle'
  type='ionicons' size={25}  color='grey'/>
    </View>
    <TouchableOpacity style={styles.logoutview} 
  >
   <Text style={styles.settingstext}> About </Text></TouchableOpacity>
   </View>
</View>
)
}
}

const styles = StyleSheet.create({
iconview:{
   top:'30%',
   left:'3%'
},
logoutview:{
    left:'20%',
    bottom:'20%'
},
settingstext:{
  fontWeight:'bold'
}
})

当我单击抽屉导航器中的“设置”按钮（可触摸不透明度）时，我想关闭抽屉并转到设置页面，但出现以下错误。

TypeError：未定义不是对象（评估“_this.props.navigation.navigate”）。

有人能告诉我哪里错了吗？提前谢谢了。