Question

除了单击SettingsList.Item内的最后一个SettingsRoute组件外，以下代码均有效。我得到的错误是“无法读取未定义的属性navigation”。

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);

我需要将props传递给函数吗？
我是否甚至在正确的位置定义了变量？

预先感谢

Answer 1

我犯了一个非常愚蠢的错字。

onPress={() => this.props.navigation.navigate("login")} <-这不起作用（登录名不大写）

onPress={() => this.props.navigation.navigate("Login")} <-可行！

无法读取未定义的属性“导航”

1 个答案: