undefined 不是一个函数 (评估 '_this2.props.navigate('Exercises'， { exerciseName：ex})') React Native Navi

Question

我看过类似的问题，但是这些解决方案似乎对我有用，这使我陷入困境2天了。

错误似乎来自传递this.props.navige to corameSelist.js，但是我尝试过的一切都无法正常工作。因此，任何建议都将不胜感激。当我单击corameelist.js到单独渲染时，发生错误。

错误消息屏幕截图

错误消息：

undefined is not a function (evaluating '_this2.props.navigate('Exercises', { exerciseName:ex})')

package.json

    "dependencies": {
    "prop-types": "^15.6.2",
    "react": "16.6.3",
    "react-native": "0.58.3",
    "react-native-elements": "^1.0.0",
    "react-native-gesture-handler": "^1.0.15",
    "react-native-vector-icons": "^6.3.0",
    "react-navigation": "^3.2.3"
  },

router.js：

import React from 'react';
import {
    createAppContainer,
    createMaterialTopTabNavigator,
    createStackNavigator} from 'react-navigation';
import { Icon } from 'react-native-elements';
import Home from '../home'
import ExercisePage from '../exercises/exercise';
import ExerciseList from '../exercise-list/exercise-list'
import CreateExerciseList from '../exercise-list/createListPage';
export const Route = createStackNavigator(
    {
        Home: { screen: Home },
        Exercises: { screen: ExercisePage },
        CreateList: { screen: CreateExerciseList },
        ExerciseList: { screen: ExerciseList },
    },
    {
        initialRouteName: 'Home'
    }
);
const AppContainer = createAppContainer(Route);
export default AppContainer;

home.js：

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Button, TouchableNativeFeedback } from 'react-native';
import Record from './exercises/reps';
import ExerciseList from './exercise-list/exercise-list'
import ExerciseListItem from './exercise-list/exerciseListItem'
import CreateExerciseList from './exercise-list/createListPage';
export default class Home extends Component {
    render() {
        return (
            <View style={styles.container}>
                <CreateExerciseList navigate={this.props.navigation.navigate}/>
            </View>
        );
    }
}

createlistpage.js：

import React, { Component } from 'react'
import { View, Text, Button, StyleSheet, TouchableNativeFeedback, ScrollView } from 'react-native'
import ExerciseListItem from './exerciseListItem';
export default class CreateExerciseList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            workoutList: [
                {
                    "name": "Leg Day",
                    "exercises": [
                        "Benchpress",
                        "Squat",
                        "Lateral extensions",
                        "Bicep curls",
                        "Tricep extensions",
                        "Shrugs"
                    ]
                },
                {
                    "name": "Arm Day",
                    "exercises": [
                        "Jumping Jacks",
                        "Hack squats",
                        "Tricep curls",
                        "Flying"
                    ]
                }
            ]
        }
    }
    render() {
        const navigate = this.props.navigate
        return (
            <ScrollView>
                <View>
                    <Text style={styles.header}>Create new list:</Text>
                </View>
                <View >
                    <Button style={styles.buttonNew} title='Create new list +'></Button>
                </View>
                <View style={styles.listContainer}>
                    {this.state.workoutList.map((workout) => {
                        return <TouchableNativeFeedback navigate={navigate} key={Date.now()} onPress={() => navigate('ExerciseList', {
                            title: workout.name,
                            exercises: workout.exercises,
                        })}>
                            <View>
                                <Text style={styles.listItem}>{workout.name}</Text>
                            </View>
                        </TouchableNativeFeedback>
                    })}
                </View>
            </ScrollView>
        )
    }
}

ercoryiselist.js：

import React, { Component } from 'react'
import { Text, View, StyleSheet, ScrollView } from 'react-native'
import ExerciseListItem from './exerciseListItem'
export class ExerciseList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            exercises: []

        }
    }
    componentDidMount() {
        const { navigation } = this.props;
        const title = navigation.getParam('title', 'no title available');
        const exercises = navigation.getParam('exercises', 'no exercises found');
        this.setState({
            title: title,
            exercises: exercises,
        })
    }

    render() {
        const navigate = this.props.navigate

        return (
            <View style={styles.scrollView}>
                <View>
                    <Text style={styles.header}>{this.state.title}</Text>
                </View>
                <ScrollView style={styles.scrollView}>
                    {this.state.exercises.map((ex) => {
                        return <ExerciseListItem style={styles.listItem} exerciseName={ex} key={Date.now()} onPress={(ex) => navigate('Exercises', {exerciseName: ex})} />
                    })}
                </ScrollView>
            </View>
        )
    }
}

Answer 1

在您的练习派上，尝试导入此：

import { withNavigation } from 'react-navigation';

withNavigation的作用是直接将导航道具直接提供给组件，而无需通过道具将其传递。你可以在这里读更多关于它的内容：https://reaectnavigation.org/docs/en/connecting-navigation-prop.html

另外，正如Atin Singh在评论中提到的那样，您应该通过这样的导航道具：navigation = {this.props.navigation}，而不是在您的事件上传递。然后，您只需访问孩子组件上的道具：this.props.navigation.