时间戳

首页 > 解决方案 > React Native - 导航问题“未定义不是对象（t.props.navigation.navigate）”

reactjs - React Native - 导航问题“未定义不是对象（t.props.navigation.navigate）”

问题描述

我目前正在创建一个小型 Magic the Gathering 项目，该项目从 API 获取卡片数据并将其插入到我的应用程序中。我首先获取了名称等数据，但是当我单击名称时，我想查看更多信息，例如卡片描述等。但是，我一直遇到错误“未定义不是对象（this.props.navigation.navigate）”的问题。我该如何解决？

import React from 'react';
import { Paragraph, Card, Avatar, Button } from "react-native-paper";
import { Image, View, StyleSheet, AsyncStorage } from 'react-native';


export default class CardProfile extends React.Component {
  render() {
    const { props } = this.props
    const card = props["state"].params
    const img = card.imageUrl
    return (
      <View style={styles.container}>

          <View style={styles.cardinfo}>

                    <Card>
                        <View style={styles.title}>
                            <Card.Title
                                title={card.name}
                                subtitle={card.colors}
                            />
                        </View>

                        <View style={styles.content}>
                            <Card.Content>
                                <Paragraph>{card.text}</Paragraph>
                                <Image
                                    style={styles.img}
                                    source={{ uri: img }}
                                />
                            </Card.Content>
                        </View>

                        <View style={styles.actions}>
                            <Card.Actions>
                                <Button onPress={() => {
                                    // create a function that saves your data asyncronously
                                    _storeData = async () => {
                                        try {
                                            await AsyncStorage.setItem('@Card', this.state.card);
                                        } catch (error) {
                                            console.log("Could not save!", error);
                                        }
                                    }
                                }}>add card</Button>
                            </Card.Actions>
                        </View>

                    </Card>

                </View>
            </View>
        );
    }
}

输出应该是我想要查看的所选卡片的卡片信息。

标签： reactjsapireact-nativereact-navigationreact-native-paper

解决方案

你在哪里使用this.props.navigation.navigate你的代码？您确定您调用它的组件已navigation作为道具传递吗？

推荐阅读