Question

我刚开始使用React Native。这是代码

app.js

import React, { Component } from 'react';

import { StackNavigator } from 'react-navigation';

import Splash from "./screens/splash";
import Home from "./screens/home";
import Card from "./screens/card";

export const RootNavigator = StackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      header: null,
    },
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
      headerTitle: 'Profile',
    },
  },
  Card: {
    screen: Card,
    navigationOptions: {
      header: null,
    },
  },
});

export default class App extends Component {

  constructor(props) {
    super(props);

    this.state = { showSplash: true };

    // after 1200ms change showSplash property for spalsh screen
    setTimeout(() => {
      this.setState(previousState => {
        return { showSplash: false };
      });
    }, 1200);
  }

  render() {
    if (this.state.showSplash) {
      return (<Splash />);
    } else {
      return (<RootNavigator />);
    }
  }
}

在 home.js 中我直接使用卡片组件

<ScrollView>
{
  this.state.cards.map((data, index) => {
    return (
      <Card key={data.id} cardData={data} />
    );
  })
}

这是 card.js

import React, { Component } from 'react';
import { Button, View, Text, Image } from 'react-native';

export default class Card extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <View style={{ flex: 0.30 }}>
                    <Image source={{ uri: this.props.cardData.imgUrl }} style={{ height: 100 }} />
                </View>
                <View style={{ flex: 0.70, backgroundColor: 'steelblue' }}>
                    <Text >{this.props.cardData.name}</Text>
                    <Text >{this.props.cardData.imgUrl}</Text>
                    <Button
                        onPress={() => this.props.navigation.navigate('Profile', {})}
                        title="Profile"
                    />
                </View>
            </View>
        );
    }
}

现在如果我使用

const { navigate } = this.props.navigation;

profile.js 中的

可以正常工作，但如果 card.js 则显示

TypeError : undefined is not an object (evaluating 'this.props.navigation.navigate')

这个问题被多次询问并尝试了答案提供的所有解决方案，但没有一个答案有帮助。

这可能是什么问题？这是因为我在<Card>组件中使用Home

Answer 1

如果我理解正确，Card屏幕中的home.js组件是card.js中的组件。

因为你直接在home.js中使用Card组件（没有使用react-navigation导航到它），所以没有注入导航道具。如果您希望当前的代码有效，则应将导航道具从profile.js

传递到您的卡组件

const { navigation } = this.props;
...
<ScrollView>
{
  this.state.cards.map((data, index) => {
    return (
      <Card navigation={navigation} key={data.id} cardData={data} />
    );
  })
}
</ScrollView>

最有可能的是，您正在使用this.props.navigation.navigate('Profile')打开profile.js屏幕，因此在那里工作正常。

TypeError：undefined不是反应原生的对象（评估this.props.navigation.navigate）

1 个答案: