ReferenceError:Can't find variable:navigation

Question

我刚开始使用反应导航。我也在使用世博会。当我使用 npm 安装 react-navigation 时，它处理时没有错误，但是当我 运行 我的 expo 项目时，它会导致错误并显示此消息：ReferenceError: 找不到 variable:navigation。我尝试删除 node_modules，清除缓存，用 yarn 安装它，使用其他版本，但没有一个能解决问题。有什么机构可以帮助我吗？？！！ enter image description here

 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',
      },
    },
  }
);

Answer 1

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>

      );
    }

希望能解决