我有一个连接到函数的按钮，该函数执行获取操作，然后导航到下一个屏幕。提取工作正常，但是尝试导航到下一个屏幕会出现此错误：
未定义不是对象（评估'_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',
}
);以前的屏幕可以正常导航。我查看了有关此错误的其他问题，但这些问题都没有帮助解决此问题。
您可以使用withNavigation。
withNavigation是一个高阶组件，它将导航道具传递到包装组件中。当您无法将导航道具直接传递到组件中时，或者在孩子嵌套很深的情况下不想传递它时，这很有用。
import { withNavigation } from 'react-navigation';
.
.
.
// your component
.
.
.
export default withNavigation(RestOptions);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句