undefined不是一个函数（评估'_this2.props.navigate（'Exercises'，{exerciseName：ex}）'）React Native Navigation

Question

我看过类似的问题，但没有一个解决方案似乎对我有用，这让我困扰了2天。

错误似乎来自于将.props.navigate传递给exerciseList.js，但是我尝试过的所有内容都不起作用。所以任何建议都会非常感激。当我点击exerciseList.js到单独渲染时，会发生错误。

Error message screenshot here

错误信息：

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

exerciseList.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

在exerciseList.js上，尝试导入：

import { withNavigation } from 'react-navigation';

withNavigation所做的是它直接为组件提供导航道具，而无需通过道具传递它。你可以在这里阅读更多相关信息：https://reactnavigation.org/docs/en/connecting-navigation-prop.html

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