React native 无法读取未定义的属性“navigation”

以下代码除了单击

设置路径

中的最后一个

设置列表项

组件外，其他所有代码都有效。我得到的错误是“无法读取未定义的属性

导航

”

从“React”导入React；
进口{
看法
文本输入，
警觉的，
键盘避免了gView，
尺寸，
异步存储，
活动指示器，
后手
}从“反应本族语”；
从“反应导航”导入{withNavigation}；
从“react native pull to refresh”导入PTRView；
从“反应本机设置列表”导入设置列表；
从“原生基”导入{Text，Toast，Root}；
进口{
海底航行，
表面，
按钮
列表
大字标题
转换
分隔器，
段落
对话
门户
}从“反应本族语论文”；
从“./components/”导入{Home}；
让宽度=尺寸。获取（“窗口”）。宽度；
让高度=尺寸。获取（“窗口”）。高度；
常量HomeRoute=（）=>(
这个。刷新}>
已登录：
);
康斯特卡=道具=>(
{props.grade}
{props.name}
{props.letterGrade}
);
常数设置路由=（）=>(
Alert.Alert（“测试”）}
/>
Alert.Alert（“测试”）}
/>
this.props.navigation.navigate（“chooseDistrict”）}
/>
);
常量responsiveFontSize=f=>{
返回数学sqrt（高度*高度+宽度*宽度）*（f/100）；
};
导出类。组件{
静态导航选项={
标题：“等级”，
headerLeft:null，
已启用的手势：false
};
构造函数（）{
超级（）；
此.state={
索引：0，
我授权：错，
路线：[
{键：“家”，标题：“家”，图标：“家”}，
{
键：“设置”，
标题：“设置”，
图标：“设置”，
}
],
可见：假
};
}
_handleIndexChange=index=>this.setState（{index}）；
_renderScene=BottomNavigation.SceneMap({
家：回家路线，
设置：设置路线
});
刷新（）{
//获取分数并重新填充选项卡
//刷新
this.setState（{isAuthed:true}）；
}
组件willmount（）{
addEventListener（“hardwareBackPress”，function（））{
返回true；
});
}
痛风{
this.props.navigation.navigate（“登录”）；
}
render（）{
报税表（
);
}
}
使用导航导出默认值（等级）；

我需要将

道具

传递到函数中吗？
我是否在正确的地方定义了变量

---

提前谢谢

我打了一个很愚蠢的错别字

onPress={（）=>this.props.navigation.navigate（“login”）}

this.props.navigation.navigate（“login”）}

import React from "react";
import {
  View,
  TextInput,
  Alert,
  KeyboardAvoidingView,
  Dimensions,
  AsyncStorage,
  ActivityIndicator,
  BackHandler
} from "react-native";
import { withNavigation } from "react-navigation";
import PTRView from "react-native-pull-to-refresh";
import SettingsList from "react-native-settings-list";
import { Text, Toast, Root } from "native-base";
import {
  BottomNavigation,
  Surface,
  Button,
  List,
  Headline,
  Switch,
  Divider,
  Paragraph,
  Dialog,
  Portal
} from "react-native-paper";
import { Home } from "../components/";
let width = Dimensions.get("window").width;
let height = Dimensions.get("window").height;

const HomeRoute = () => (
  <PTRView onRefresh={() => this.refresh}>
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Logged in:</Text>
      <Card name="Hello World" color="#d50000" letterGrade="ABC" grade="123" />

    </View>
  </PTRView>
);

const Card = props => (
  <Surface
    style={{
      margin: 4,
      padding: 8,
      backgroundColor: props.color,
      elevation: 3,
      justifyContent: "center",
      width: width - 21,

      height: height / 9 
    }}
  >
    <Text
      style={{
        textAlign: "right",
        alignSelf: "stretch",
        color: "white",
        fontSize: responsiveFontSize(2.2)
      }}
    >
      {props.grade}
    </Text>
    <Text
      style={{
        textAlign: "left",
        color: "white",
        fontSize: responsiveFontSize(2.6)
      }}
    >
      {props.name}
    </Text>
    <Text
      style={{
        textAlign: "right",
        alignSelf: "stretch",
        color: "white",
        fontSize: responsiveFontSize(2.3)
      }}
    >
      {props.letterGrade}
    </Text>
  </Surface>
);

const SettingsRoute = () => (
  <View style={{ flex: 1, width: width - 9, justifyContent: "center" }}>
    <SettingsList backgroundColor="transparent">
      <SettingsList.Header
        headerText="Settings"
        headerStyle={{ color: "black" }}
      />

      <SettingsList.Item
        itemWidth={50}
        title="About/Credits"
        onPress={() => Alert.alert("Test")}
      />
      <SettingsList.Item
        itemWidth={50}
        title="Help"
        onPress={() => Alert.alert("TEST")}
      />
      <SettingsList.Item
        itemWidth={50}
        title="Logout"
        onPress={() => this.props.navigation.navigate("chooseDistrict")}
      />
    </SettingsList>

  </View>
);

const responsiveFontSize = f => {
  return Math.sqrt(height * height + width * width) * (f / 100);
};
export class Grades extends React.Component {
  static navigationOptions = {
    title: "Grades",
    headerLeft: null,
    gesturesEnabled: false
  };
  constructor() {
    super();
    this.state = {
      index: 0,
      isAuthed: false,
      routes: [
        { key: "home", title: "Home", icon: "home"},

        {
          key: "settings",
          title: "Settings",
          icon: "settings",

        }
      ],

      visible: false
    };
  }

  _handleIndexChange = index => this.setState({ index });

  _renderScene = BottomNavigation.SceneMap({
    home: HomeRoute,
    settings: SettingsRoute
  });

  refresh() {
    //get grades and repopulate tabs
    //refresh

    this.setState({ isAuthed: true });
  }

  componentWillMount() {
    BackHandler.addEventListener("hardwareBackPress", function() {
      return true;
    });
  }
  pleaseLogout() {
    this.props.navigation.navigate("login");
  }

  render() {

    return ( 
      <Root>
        <BottomNavigation
          styles={{ backgroundcolor: "#8499B1" }}
          navigationState={this.state}
          onIndexChange={this._handleIndexChange}
          renderScene={this._renderScene}
        />
      </Root>
    );
  }
}
export default withNavigation(Grades);