时间戳

首页 > 解决方案 > 如何修复“未定义不是对象（评估'this.props.navigation'）”

javascript - 如何修复“未定义不是对象（评估'this.props.navigation'）”

问题描述

我无法理解反应导航。我用它定义了 stackNavigator 和 createAppContainer。我有两个组件注册为路由（MainPage，PasswordItemDetail）。MainPage 指向 PasswordItemDetail 但它们之间还存在两个组件。我一一发送导航但仍然出错。你能告诉我导航的逻辑吗？

提前致谢。

应用程序.js

import AppNavigator from './components/AppNavigator';

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

主页

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

密码项列表

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

密码项

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

密码项目详细信息

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

标签： javascriptreactjsreact-nativereact-navigation

解决方案

改变

const { navigation } = this.props.navigation;

至

const { navigation } = this.props;

第一行相当于const navigation = this.props.navigation.navigation;，并且您没有传入navigation道具，因此它试图查找.navigation，undefined并出错。

为什么navigation是空的是一个单独的问题。

推荐阅读