Question

我有一个连接到函数的按钮，该函数进行提取，然后导航到下一个屏幕。提取工作正常，但是尝试导航到下一个屏幕会出现此错误：

未定义不是对象（正在评估'_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。

withNavigation是一个高阶组件，它将导航道具传递到包装组件中。当您无法将导航道具直接传递到组件中，或者如果孩子嵌套得太深，则不想传递它，这将很有用。

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

React-native：undefined不是对象（评估'_this3.props.navigation.navigate'）

1 个答案: