TypeError: undefined не является объектом (оценка'_reactNative.route.params) React Navigation 5.0

Question

Я знаю, что есть другие вопросы от SO, которые были похожи на мою проблему, но они не помогли мне.

Я пытаюсь отправить переменные с главного экрана на другой экран отслеживания . Однако я получаю сообщение об ошибке:

TypeError: undefined не является объектом (оценка'_reactNative.route.params)

Я не уверен, нужно ли это делать с тем, как я написал свой код для передачи параметров маршрутам в React Navigation 5.0. Но я просмотрел документацию, и код мне понравился.

Вот мой код:

Home. JS

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button, navigation } from 'react-native';
import Follow from './Follow';

export default class Home extends React.Component {

    constructor(props) {
        
        super(props);
        this.state = {
            followRequest: ['John', 'Jane', 'Ram', 'Janice'],
            following: ['Hitesh']
        };
    }

    doFollow = index => {
        const { followRequest, following } = this.state;

        const followNew = followRequest.splice(index, 1);

        following.push(followNew)

        this.setState({
            followRequest,
            following
        });
    };

    render() {

        console.log(this.props.navigation)

    return (
        <View style={styles.container}>
            <Text>You are following {this.state.following.length}</Text>
            <Text>You have {this.state.followRequest.length} follow requests</Text>
            <Button
                title='Follow Page'
                onPress={() => {

                    this.props.navigation.navigate('Follow', {
                        
                        followRequest: this.state.followRequest,
                        following: this.state.following,
                        doFollow: this.doFollow()

                    });
                }}
            />
        </View>
            );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Следить. JS

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacityBase, route, navigation} from 'react-native';


export default class Follow extends React.Component {


    render() {

        const { followRequest }  = route.params;
        const { doFollow }  = route.params;

    return (
        <View style={styles.container}>

            <Text>followRequest: {JSON.stringify(followRequest)}</Text>   
          
        <Button
                title='Home Page'
                onPress={() => {
                    this.props.navigation.navigate('Home')
                } }
            />
        </View>
            );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

Вы импортируете route и navigation из response-native. Доступ к ним должен быть как к реквизитам с использованием this.props.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacityBase } from 'react-native';


export default class Follow extends React.Component {


    render() {

        const { followRequest }  = this.props.route.params;
        const { doFollow }  = this.props.route.params;

    return (
        <View style={styles.container}>

            <Text>followRequest: {JSON.stringify(followRequest)}</Text>   
          
        <Button
                title='Home Page'
                onPress={() => {
                    this.props.navigation.navigate('Home')
                } }
            />
        </View>
            );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});