如何解决“未定义不是对象（评估'this.props.navigation'）”]]

Question

我听不懂反应式导航。我定义了stackNavigator并使用它创建了createAppContainer。我有两个组件注册为route（MainPage，PasswordItemDetail）。MainPage定向到PasswordItemDetail，但它们之间还存在两个组件。我一一发送导航，但仍然出错。能否请您告诉我导航的逻辑？

提前感谢。

app.js

import AppNavigator from './components/AppNavigator';

export default AppNavigator;
AppNavigator

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import MainPage from "./MainPage";
import PasswordItemDetail from "./PasswordItemDetail";

const AppNavigator = createStackNavigator(
  {
    MainPage: {
      screen: MainPage
    },
    PasswordItemDetail: {
      screen: PasswordItemDetail
  }
  },
  {
    headerMode: "none",
    navigationOptions: {
      headerVisible: false
    }
  }
);

export default createAppContainer(AppNavigator);
的MainPage

import React from "react";
import { Container, Content } from "native-base";
import PasswordHeader from './PasswordHeader';
import PasswordItemList from './PasswordItemList';
import PasswordFooter from './PasswordFooter';

export default function MainPage() {
  const { navigation } = this.props;
  return (
    <Container>
      <PasswordHeader />
      <Content>
        <PasswordItemList navigation={navigation} />
      </Content>
      <PasswordFooter />
    </Container>
  );
}
PasswordItemList

import React, { Component } from 'react';
import { List } from 'native-base';
import PasswordItem from './PasswordItem';

export default class PasswordItemList extends Component {

    render() {
        const { navigation } = this.props.navigation;
        return (
            <List>
                <PasswordItem navigation={navigation}/>
                    <PasswordItem navigation={navigation}/>
                        <PasswordItem navigation={navigation}/>
                            <PasswordItem navigation={navigation}/>
            </List>
        );
    }
}

PasswordItem

import React, { Component } from 'react';
import { ListItem, Text } from 'native-base';

export default class PasswordItem extends Component {
    render() {
        return (
            <ListItem onPress={() => this.props.navigation.navigate('PasswordItemDetail')}>
                <Text>Password Item</Text>
            </ListItem>
        );
    }
}

PasswordItemDetail

import React, { Component } from 'react';
import { Form, Item, Label, Input } from 'native-base';

export default class PasswordItemDetail extends Component {
    render() {
        return (
            <Form>
                <Item floatingLabel>
                    <Label>Name</Label>
                    <Input />
                </Item>
                <Item floatingLabel>
                    <Label>Username</Label>
                    <Input />
                </Item>
                <Item floatingLabel>
                    <Label>Password</Label>
                    <Input />
                </Item>
            </Form>
        );
    }
}

我听不懂反应式导航。我定义了stackNavigator并使用它创建了createAppContainer。我有两个组件注册为route（MainPage，PasswordItemDetail）。 MainPage指向...

Answer 1

变更