React-native: undefined не является объектом (оценивается как '_this3.props.navigation.navigate')

Question

У меня есть кнопка, подключенная к функции, которая выполняет выборку, а затем переходит к следующему экрану. Выборка работает нормально, но при попытке перейти к следующему экрану выдается эта ошибка:

undefined не является объектом (оценка '_this3.props.navigation.navigate')

Вот код для экрана, имеющего эту проблему:

import React, { Component } from 'react';
import { View, Text, AsyncStorage, Alert, FlatList, StyleSheet } from 'react-native';
import { UsersMap } from '../UsersMap';
import { PrimaryButton } from '../Buttons';
import styles from './styles';
import { ListItem } from '../ListItem';
import MapView, { Marker } from 'react-native-maps';

class RestOptions extends Component {
    constructor() {
        super();
        this.state = {
            jsonResults: [],
            userPlaces: [],
            lat_center: 37.78825,
            lng_center: -122.4324,
            mapLoaded: false,
            screenLoaded: false,
            no_results: true
        }
    }

    renderItem = ({ item }) => {
        return (
            <View>
                <Text>{item.rest_name}</Text>
                <Text>{item.counter}</Text>
                <Text>{item.distance}</Text>
                <PrimaryButton
                    label="Set Reservation"
                    onPress={() => this.setReservation(item.rest_id)} //this is the button
                />
            </View>
        )
    }

    componentDidMount() {
        this.getSearchResults();
    }

    getSearchResults() {
        fetch('url goes here')
        .then((response) => response.json())
        .then((responseJson) => {
            var placesArray = [];
            var latArray = [];
            var lngArray = [];
            if (responseJson != "No Restaurants Found.") {
                for (key = 0; key < responseJson.rest_array.length; key = key + 1) {
                    var lati_str = responseJson.rest_array[key].lat;
                    var long_str = responseJson.rest_array[key].lng;
                    var count_str = responseJson.rest_array[key].counter;
                    var lati = parseFloat(lati_str);
                    var long = parseFloat(long_str);
                    var count = parseFloat(count_str);
                    latArray.push(lati);
                    lngArray.push(long);
                    placesArray.push ({
                        coordinates: {
                            latitude: lati,
                            longitude: long
                        },
                        id: count
                    });
                }
                this.setState({
                    mapLoaded: true,
                    userPlaces: placesArray,
                    jsonResults: responseJson.rest_array
                });
            }
            if (latArray.length > 0) {
                this.setState({no_results: false});
            }
            var max_lat = Math.max.apply(null, latArray);
            var min_lat = Math.min.apply(null, latArray);
            var max_lng = Math.max.apply(null, lngArray);
            var min_lng = Math.min.apply(null, lngArray);
            var latCenter = (max_lat + min_lat) / 2;
            var lngCenter = (max_lng + min_lng) / 2;
            this.setState({
                lat_center: latCenter,
                lng_center: lngCenter,
                screenLoaded: true
            });
        }).catch((error) => {
            console.error(error);
        });
    }

    setReservation(rest_id) {
        fetch('url goes here', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application.json',
            },
            body: JSON.stringify({
                restaurant_id: rest_id
            })
        }).then((response) => response.json())
        .then((responseJson) => {
            if (responseJson == 1) {
                this.props.navigation.navigate('SetReservation');
                //getting an error from this navigation ^^
            } else {
                Alert.alert("Error");
            }
        }).catch((error) => {
            console.error(error);
        });
    }

    render() {
        const listItem =
            <FlatList
                data={this.state.jsonResults}
                renderItem={this.renderItem}
                keyExtractor={(item, index) => index.toString()}
            />;
        const noResults = <Text>No Restaurants Found.</Text>;
        const screenLoading = <Text>Getting your results...</Text>;

        let message;
        if (!this.state.screenLoaded) {
            message = screenLoading
        } else {
            if (this.state.no_results) {
                message = noResults
            } else {
                message = listItem
            }
        }
        return (
            <View>
                {this.state.mapLoaded &&
                <View style={mapStyles.mapContainer}>
                    <MapView
                        style={mapStyles.map}
                        initialRegion={{
                            latitude: this.state.lat_center,
                            longitude: this.state.lng_center,
                            latitudeDelta: 0.1022,
                            longitudeDelta: 0.0821
                        }}
                    >
                        {this.state.userPlaces.map(userPlace => (
                            <MapView.Marker
                                coordinate={userPlace.coordinates}
                                key={userPlace.id}
                            />
                        ))}
                    </MapView>
                </View>}
                {message}
            </View>
        );
    }
};

const mapStyles = StyleSheet.create({
    mapContainer: {
        width: '100%',
        height: 200,
    },
    map: {
        width: '100%',
        height: '100%',
    },
});

export default RestOptions;

Вот мой роутер:

import React from 'react';
import { StackNavigator, TabNavigator, SwitchNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import Search from '../screens/Search';
import Account from '../screens/Account';
import Line from '../screens/Line';
import Reservations from '../screens/Reservations';
import SearchResults from '../screens/SearchResults';
import SetReservation from '../screens/SetReservation';
import SignIn from '../screens/SignIn';

export const SignInStack = StackNavigator({
    SignIn: {
        screen: SignIn,
        navigationOptions: {
            title: 'Sign In',
        },
    },
});

const SearchStack = StackNavigator({
    Search: {
        screen: Search,
        navigationOptions: (props) => ({
            title: 'Search Restaurants',
        }),
    },
    SearchResults: {
        screen: SearchResults,
        navigationOptions: {
            title: 'Search Results',
        },
    },
    SetReservation: {
        screen: SetReservation,
        navigationOptions: {
            title: 'Set Reservation',
        },
    },
});

const ReservationsStack = StackNavigator({
    Reservations: {
        screen: Reservations,
        navigationOptions: (props) => ({
            title: 'Reservations',
        }),
    },
});

const AccountStack = StackNavigator({
    Account: {
        screen: Account,
        navigationOptions: (props) => ({
            title: 'Account',
        }),
    },
});

export const Tabs = TabNavigator({
    Search: {
        screen: SearchStack,
        navigationOptions: {
            tabBarLabel: 'Search',
            tabBarIcon: ({ tintColor }) => <Icon name="md-list" size={35} color={tintColor} />
        },
    },
    Reservations: {
        screen: ReservationsStack,
        navigationOptions: {
            tabBarLabel: 'Reservations',
            tabBarIcon: ({ tintColor }) => <Icon name="md-contact" size={35} color={tintColor} />
        },
    },
    Account: {
        screen: AccountStack,
        navigationOptions: {
            tabBarLabel: 'Account',
            tabBarIcon: ({ tintColor }) => <Icon name="md-add" size={35} color={tintColor} />
        },
    },
});

export const AppRoute = SwitchNavigator(
    {
        Auth: SignInStack,
        App: Tabs,
    },
    {
        initialRouteName: 'Auth',
    }
);

Предыдущие экраны могут перемещаться без проблем. Я рассмотрел другие вопросы, касающиеся этой ошибки, и ни один из них не помог в этой ситуации.

Answer 1

Вы можете использовать с навигацией .

withNavigation - компонент более высокого порядка, который передает навигационную информацию в упакованный компонент. Это полезно, когда вы не можете передать навигационную опору непосредственно в компонент или не хотите передавать ее в случае глубоко вложенного дочернего элемента.

import { withNavigation } from 'react-navigation';
.
.
.
// your component
.
.
.
export default withNavigation(RestOptions);