React native 引用错误：Can'；找不到变量：导航

我刚开始使用react导航。我也使用expo。当我使用npm安装react navigation时，它的处理过程没有错误，但当我通过expo运行我的项目时，它将导致错误，并显示以下消息：ReferenceError:找不到变量：navigation。我试着删除node_模块，清除缓存，用thread安装它，使用其他版本但没有解决问题。有人能帮我吗？？！！

从“React”导入React；
导入{样式表、文本、图像、视图、图像背景、TouchableHighlight}
从“反应本机”；
从“@expo/vector icons”导入{Ionicons}；//6.2.2
从“react navigation”导入{StackNavigator}；
导出默认类app扩展React.Component
{
render（）{
返回；
}
} 
类main扩展了React.Component{
render（）{
返回(
导航。导航（'Patients'）}>
sss
性交
);
}
}
类patines扩展了React.Component{
render（）{
返回(
病人
);
}
}
类组件{
render（）{
返回(
约会
);
}
}
类设置扩展了React.Component{
render（）{
返回(
背景
);
}
}
const styles=StyleSheet.create({
容器：{
边框宽度：0，
边界半径：15，
边框颜色：'#ddd'，
边框底部宽度：0，
阴影颜色：'#3535'，
阴影偏移：{宽度：0，高度：0}，
阴影不透明度：0.1，
阴影半径：5，
标高：0.5，
边缘左：5，
marginRight:5，
玛金托普：80，
填充：5，
宽度：'38%'，
身高：'20%'，
辩护内容：'中心'，
对齐项目：'center'
},
});
const RootStack=StackNavigator(
{
主要内容：{
屏幕：主，
},
病人:{
屏幕：天井，
},
任命：{
屏幕：预约，
},
设置：{
屏幕：设置，
},
},
{
模式：“模态”，
headerMode:“无”，
}
);
const MainStack=StackNavigator(
{
主页：{
屏幕：主，
},
详情：{
屏幕：主，
},
},
{
initialRouteName:“主页”，
导航选项：{
头型：{
背景颜色：“#F451E”，
},
标题颜色：“#fff”，
头饰样式：{
fontWeight:'粗体'，
},
},
}
);

render（）{
const{navigation}=this.props.navigation；
返回(
导航。导航（'Patients'）}>
sss
性交
);
}

---

我希望它能解决问题

plz提供代码…请检查代码是的，当我们修复第二个触摸高光时，它能完美地工作，因为第一个高光太多了

 import React from 'react';
 import { StyleSheet, Text, Image,View,ImageBackground,TouchableHighlight } 
 from 'react-native';
 import { Ionicons } from '@expo/vector-icons'; // 6.2.2
 import { StackNavigator } from 'react-navigation';

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

class main extends React.Component {

render() {
 return (
  <ImageBackground source={require('./assets/img/main.jpg')} style={{width:'100%',height:'100%',flex:1}} >
  <View style={{width:'100%',height:'15%'}}></View>
  <View style={{flex:1,flexDirection:'row',justifyContent:'space-around'}}>

<TouchableHighlight onPress={() => navigation.navigate('Patients')}>
  <View style={styles.container}>  
      <Text style={{padding:5,alignItems: 'center'}}>sss</Text>  
  </View>
</TouchableHighlight> 

<TouchableHighlight onPress={navigation.navigate('Appointment')}>
  <View style={styles.container}>
      <Ionicons name="md-checkmark-circle" size={64} color="black" />
      <Text style={{padding:5,alignItems: 'center'}}>fuck </Text>  
  </View>
</TouchableHighlight>

  </View>

  </ImageBackground>

  );
}
 }
   class patinets extends React.Component{
   render(){
      return(
          <View>
             <Text>patient</Text>
          </View>
       );
     }
     }
    class appointment extends React.Component{
     render(){
       return(
           <View>
             <Text>appointment</Text>
           </View>
       );
     }
   }
   class setting extends React.Component{
     render(){
       return(
            <View>
             <Text>setting</Text>
           </View>
       );
     }
   }
   const styles = StyleSheet.create({
     container: {

borderWidth: 0,
borderRadius: 15,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#353535',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.1,
shadowRadius: 5,
elevation: 0.5,
marginLeft: 5,
marginRight: 5,
marginTop: 80,
padding:5,
width:'38%',
height:'20%',
justifyContent:'center',
alignItems:'center'




     },
   });
   const RootStack = StackNavigator(
     {
       Main: {
         screen: main,
       },
       Patients: {
         screen: patinets,
       },
        Appointment: {
         screen: appointment,
       },
      Setting: {
         screen: setting,
       },

    },
    {
      mode: 'modal',
      headerMode: 'none',
     }
   );
    const MainStack = StackNavigator(
     {
       Home: {
         screen: main,
        },
       Details: {
         screen: main,
       },
     },
     {
       initialRouteName: 'Home',
       navigationOptions: {
         headerStyle: {
           backgroundColor: '#f4511e',
          },
        headerTintColor: '#fff',
         headerTitleStyle: {
       fontWeight: 'bold',
      },
    },
  }
);

render() {
const { navigation } = this.props.navigation;
     return (
      <ImageBackground source={require('./assets/img/main.jpg')} style={{width:'100%',height:'100%',flex:1}} >
      <View style={{width:'100%',height:'15%'}}></View>
      <View style={{flex:1,flexDirection:'row',justifyContent:'space-around'}}>

    <TouchableHighlight onPress={() => navigation.navigate('Patients')}>
      <View style={styles.container}>  
          <Text style={{padding:5,alignItems: 'center'}}>sss</Text>  
      </View>
    </TouchableHighlight> 

    <TouchableHighlight onPress={navigation.navigate('Appointment')}>
      <View style={styles.container}>
          <Ionicons name="md-checkmark-circle" size={64} color="black" />
          <Text style={{padding:5,alignItems: 'center'}}>fuck </Text>  
      </View>
    </TouchableHighlight>

      </View>

      </ImageBackground>

      );
    }