undefined не является функцией (оценивает '_this2.props.navigate (' Exercises ', {exercName: ex})'). Реагирует на встроенную навигацию.

Question

Я смотрел на подобные вопросы, но ни одно из решений, похоже, не работает для меня, и это поставило меня в тупик на 2 дня.

Похоже, что ошибка возникает из-за передачи this.props.navigate в exercList.js, однако все, что я пробовал, не работает.Так что любой совет будет очень признателен.Ошибка возникает, когда я щелкаю файл exercList.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>
        )
    }
}

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

В файле exercList.js попробуйте импортировать это:

import { withNavigation } from 'react-navigation';

Что делает withNavigation, так это то, что он обеспечивает навигационную реквизит непосредственно к компоненту, без необходимости пропускать его через реквизит.Вы можете прочитать больше об этом здесь: https://reactnavigation.org/docs/en/connecting-navigation-prop.html

Кроме того, как упоминал Атин Сингх в комментариях, вы должны передавать навигационные реквизиты следующим образом: navigation = {this.props.navigation}, а не так, как вы передаете по HOC.Тогда вы просто получите доступ к реквизиту дочернего компонента следующим образом: this.props.navigation.