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

主页

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

Answer 1

更改

const { navigation } = this.props.navigation;

到

const { navigation } = this.props;

第一行等效于const navigation = this.props.navigation.navigation;，并且您没有传递navigation道具，因此它试图在.navigation上查找undefined，并出错

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

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

1 个答案: