Question

每当我尝试导航到另一个屏幕时，我都会遇到问题。我在子组件中使用导航，即使我将道具传递给父组件它也不起作用。这是我第一次使用 React 导航。我已经尝试了许多可能的解决方案，但仍然无法解决这个问题。我正在使用反应导航 5，我需要帮助。我收到这样的错误：

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

Home.js // Parent Component

class Home extends Component {
  render() {
    return (
      <Cards
      title="In Progress"
      imgUri={require('../assets/CardProgress.png')}
      navigateAction={() =>
        this.props.navigation.navigate('SiteAudit')
      }
    )
  }
}

Card.js // Child Component

const Cards = (props) => {
  return (
    <CardContainer
      backgroundColor={props.backgroundColor}
      onPress={() => {
        props.navigation.navigateAction;
      }}>
      <CardWrapper>
        <CardTitle>{props.title}</CardTitle>
        <CardImage source={props.imgUri} />
      </CardWrapper>
    </CardContainer>
  );
};

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Dashboard from './screens/Dashboard';
import SiteAudit from './screens/SiteAudit';

const RootStack = createStackNavigator();
const DashboardStack = createStackNavigator();
const SiteAuditStack = createStackNavigator();

const DashboardScreen = () => {
  return (
    <DashboardStack.Navigator>
      <DashboardStack.Screen name="Dashboard" component={Dashboard} />
    </DashboardStack.Navigator>
  );
};

const SiteAuditScreen = () => {
  return (
    <SiteAuditStack.Navigator>
      <SiteAuditStack.Screen name="SiteAudit" component={SiteAudit} />
    </SiteAuditStack.Navigator>
  );
};

const Navigation = () => {
  return (
    <NavigationContainer>
      <RootStack.Navigator initialRouteName="Dashboard">
        <RootStack.Screen name="Dashboard" component={DashboardScreen} />
        <RootStack.Screen name="SiteAudit" component={SiteAuditScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

Answer 1

如下编辑您的卡片视图

<Cards
      title="In Progress"
      imgUri={require('../assets/CardProgress.png')}
      onPress={() => this.buttonPress()}
/>

const buttonPress = () => {
  this.props.navigation.navigate('Site Audit');
};

按如下方式编辑您的按钮，

<TouchableOpacity
      style={styles.cardButton}
      onPress={onPress}
      <Text style={styles.cardTitle}>{this.props.title}</Text>
      <Image style={styles.imageCard} source={this.props.imgUri} />
</TouchableOpacity>

Answer 2

问题解决了，我只需要重新阅读react navigation的文档即可。我需要使用此处说明的 useNavigation https://reactnavigation.org/docs/use-navigation/

Cards.js // Child Component

const Cards = (props) => {
  return (
    <CardContainer
      backgroundColor={props.backgroundColor}
      onPress={props.navigationAction}>
      <CardWrapper>
        <CardTitle>{props.title}</CardTitle>
        <CardImage source={props.imgUri} />
      </CardWrapper>
    </CardContainer>
  );
};

Home.js // Parent Component

import {useNavigation} from '@react-navigation/native';

const Home = () => {
  const navigation = useNavigation();
  return (
    <Cards
      title="Completed"
      backgroundColor="#0082C8"
      navigationAction={() => {
        navigation.navigate('Site Audit');
      }}
    />
  )
}

将导航从子组件传递到父组件，获取 TypeError

2 个答案: