Question

我正在尝试在标题中获得按钮，以导航到图像库。当我按下按钮时，我得到“无法读取未定义的属性'导航'。这两个文件都在同一文件夹中，即“个人资料”。任何人都知道此错误的含义以及如何解决该问题吗？

这是我在headerRight中设置按钮的方式。

//HomerSimpson.js    
import React from "react";
    import {
      Button,
      View,
      Text,
      StyleSheet,
      Image,
      List,
      ListItem,
      ImageBackground
    } from "react-native";

    import { withNavigation } from 'react-navigation';
    import HomerGallery from "./Profiles/HomerGallery";


    class HomerSimpson extends React.Component {
      static navigationOptions = {
        title: "Homer Simpson Profile",
        headerStyle: {
          backgroundColor: "#53b4e6"
        },
        headerTintColor: "#f6c945",
        headerTitleStyle: {
          fontWeight: "bold"
        },
        headerRight: (
          <Button
            onPress={() => this.props.navigation.navigate("HomerGallery")}
            title="Gallery"
            color="#f6c945"
          />
        )
      };

我为图库本身制作了一个单独的组件，它与HomerSimpson.js位于同一文件夹中。

//HomerGallery.js
import React from "react";
    import {
      Button,
      View,
      Text,
      StyleSheet,
      Image,
      List,
      ListItem,
      ImageBackground
    } from "react-native";

    import ImageSlider from 'react-native-image-slider';


    class HomerGallery extends React.Component {
      static navigationOptions = {
        title: "Homer's Gallery",
        headerStyle: {
          backgroundColor: "#53b4e6"
        },
        headerTintColor: "#f6c945",
        headerTitleStyle: {
          fontWeight: "bold"
        },
        headerRight: <Button onPress={() => alert("Bart loves to skateboard")} title="Facts" color="#f6c945" />
      };
      render() {
        return (<ImageSlider images={[
          'https://i.pinimg.com/474x/f1/36/ca/f136ca04817e60fa12f4a5680101ff8b.jpg',
          'https://i.pinimg.com/474x/b1/da/e2/b1dae2fe6ca1620e5d1949a2dcd33a0c.jpg',
          'https://i.pinimg.com/564x/7b/53/32/7b5332ef6a981b3c54e855495ea1c828.jpg',
          'https://i.pinimg.com/564x/f4/71/79/f471798aeeae427474f544691d572970.jpg',
          'https://i.pinimg.com/564x/32/3d/53/323d534f07de7d9ebeb58ede1f87d63e.jpg'
        ]}/>)
      };
    }

    export default HomerGallery;

画廊的路线是“ HomerGallery”。这是在我的导航文件中设置的方式。它是进口的，但我将保留这些

    import HomerGallery from "../../Profiles/HomerGallery";
    import { createStackNavigator, createAppContainer } from "react-navigation";

    const AppNavigator = createStackNavigator(
      {
        Login: Login,
        Home: HomeScreen,
        Details: DetailsScreen,
        Bio: BioScreen,
        EmployeeDirectory: EmployeeDirectory,
        HomerSimpson: HomerSimpson,
        BartSimpson: BartSimpson,
        MargeSimpson: MargeSimpson,
        LisaSimpson: LisaSimpson,
        MaggieSimpson: MaggieSimpson,
        SantasHelper: SantasHelper,
        BarneyGumble: BarneyGumble,
        MrBurns: MrBurns,
        KentBrockman: KentBrockman,
        RalphWiggum: RalphWiggum,
        OttoMan: OttoMan,
        Scratchy: Scratchy,
        HomerGallery: HomerGallery,
        BallBounce: BallBounce,
        OverlayPage: OverlayPage, 
        Rankings: Rankings
      },
      {
        initialRouteName: "HomerSimpson",
        defaultNavigationOptions: {
            headerStyle: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      },
    );

    export default createAppContainer(AppNavigator);

Answer 1

HomerSimpson.js

export default withNavigation(HomerSimpson)

这应该通过所有必要的导航道具。

Answer 2

我认为这是违规行onPress={() => this.props.navigation.navigate("HomerGallery")}。静态对象navigationOptions无法访问组件的this.props。

您没有提到React Navigation，但是我猜这就是您所使用的。这是他们的文档中的一个示例，显示了如何通过使用函数而不是对象来访问props。祝你好运！

static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  }

更新

示例适用于您的代码：

navigationOptions = ({ navigation }) => ({
  title: "Homer Simpson Profile",
  headerStyle: {
    backgroundColor: "#53b4e6"
  },
  headerTintColor: "#f6c945",
  headerTitleStyle: {
    fontWeight: "bold"
  },
  headerRight: (
    <Button
      onPress={() => navigation.navigate("HomerGallery")}
      title="Gallery"
      color="#f6c945"
    />
  )
});

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

2 个答案: