我正在尝试使用Google Map Marker上的onPress导航到堆栈中的屏幕。
当我单击标记时，我收到：
未定义不是对象（正在评估'_this11.props.navigation'）。
我相信它告诉我this.props从标记中不存在，但是为什么呢？我需要传递给它什么以及如何传递？
代码：
import React from "react";
import Icon from "react-native-vector-icons/FontAwesome";
import {
StyleSheet,
Text,
View,
FlatList,
Button,
Component
} from "react-native";
import MapView from "react-native-maps";
import {
createStackNavigator,
createBottomTabNavigator
} from "react-navigation";
import { oauth, net } from "react-native-force";
import { Marker } from "react-native-maps";
import { Callout } from "react-native-maps";
import { StackNavigator } from "react-navigation";
const styles = StyleSheet.create({
container: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: "flex-end",
alignItems: "center"
},
item: {
padding: 10,
fontSize: 18,
height: 44
},
map: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0
}
});
class HomeScreen extends React.Component {
render() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}
>
<Text>Home!</Text>
<Button
title="Go to Settings"
onPress={() => this.props.navigation.navigate("Settings")}
/>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate("Details")}
/>
</View>
);
}
}
class LocationDetailScreen extends React.Component {
render() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}
>
<Text>Home!</Text>
<Button
title="Go to Settings"
onPress={() => this.props.navigation.navigate("Settings")}
/>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate("Details")}
/>
</View>
);
}
}
class SettingsScreen extends React.Component {
componentDidMount() {
var that = this;
oauth.getAuthCredentials(
() => that.fetchData(), // already logged in
() => {
oauth.authenticate(
() => that.fetchData(),
error => console.log("Failed to authenticate:" + error)
);
}
);
}
fetchData() {
var that = this;
net.query(
"SELECT Id, Name, Email, Phone FROM User LIMIT 10",
response => that.setState({ data: response.records })
);
}
render() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}
>
<Text>Settings!</Text>
<Button
title="Go to Home"
onPress={() => this.props.navigation.navigate("Home")}
/>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate("Details")}
/>
</View>
);
}
}
class UserListScreen extends React.Component {
static navigationOptions = {
title: "Map"
};
constructor(props) {
super(props);
this.state = {
data: [],
latitude: null,
longitude: null,
error: null
};
}
componentDidMount() {
var that = this;
navigator.geolocation.getCurrentPosition(
position => {
console.log("wokeeey");
console.log(position);
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: console.log("this is broken")
});
},
error => this.setState({ error: error.message }),
{ enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 }
);
oauth.getAuthCredentials(
() => that.fetchData(), // already logged in
() => {
oauth.authenticate(
() => that.fetchData(),
error => console.log("Failed to authenticate:" + error)
);
}
);
}
fetchData() {
var that = this;
net.query(
"SELECT Id, Name, Type__c, Lat_Long__Latitude__s, Lat_Long__Longitude__s FROM Location__c LIMIT 10",
response => that.setState({ data: response.records })
);
}
render() {
return (
<View style={styles.container}>
<Text> {this.state.latitude} </Text>
<Text> {this.state.longitude} </Text>
<Text> {this.state.error} </Text>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<Text style={styles.item}>
{item.Name} - {item.Type__c}
</Text>
)}
keyExtractor={(item, index) => "key_" + index}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
static navigationOptions = {
title: "Some Map"
};
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
var that = this;
navigator.geolocation.getCurrentPosition(
position => {
console.log("wokeeey");
console.log(position);
this.setState({
region: {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
latitudeDelta: 0.0462,
longitudeDelta: 0.0261
}
});
},
error => this.setState({ error: error.message }),
{ enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 }
);
oauth.getAuthCredentials(
() => that.fetchData(), // already logged in
() => {
oauth.authenticate(
() => that.fetchData(),
error => console.log("Failed to authenticate:" + error)
);
}
);
}
fetchData() {
var that = this;
net.query(
"SELECT Id, Name, Type__c, Lat_Long__Latitude__s, Lat_Long__Longitude__s FROM Location__c LIMIT 10",
response => that.setState({ data: response.records })
);
}
render() {
return (
<MapView style={styles.map} region={this.state.region}>
{this.state.data.map(function (marker) {
return (
<Marker
onPress={() =>
this.props.navigation.navigate(
"LocationDetailScreen"
)
}
coordinate={{
latitude: marker.Lat_Long__Latitude__s,
longitude: marker.Lat_Long__Longitude__s
}}
title={marker.Name}
description="hello"
/>
);
})}
</MapView>
);
}
}
const HomeStack = createStackNavigator({
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
Settings: { screen: SettingsScreen },
LocationDetails: { screen: LocationDetailScreen }
});
const SettingsStack = createStackNavigator({
Home: { screen: HomeScreen },
Settings: { screen: SettingsScreen },
Details: { screen: DetailsScreen }
});
const DetailsStack = createStackNavigator({
Home: { screen: HomeScreen },
Settings: { screen: SettingsScreen },
Details: { screen: DetailsScreen },
LocationDetails: { screen: LocationDetailScreen }
});
export default createBottomTabNavigator(
{
Home: { screen: HomeStack },
Settings: { screen: SettingsStack },
Details: { screen: DetailsStack }
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === "Home") {
iconName = `rocket${focused ? "" : "-outline"}`;
} else if (routeName === "Settings") {
iconName = `rocket${focused ? "" : "-outline"}`;
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
return <Icon name={iconName} size={25} color={tintColor} />;
}
}),
tabBarOptions: {
activeTintColor: "tomato",
inactiveTintColor: "gray"
}
}
);
答案 0 :(得分：1)
我认为您遇到的问题不是在数据映射函数中使用箭头函数，因此您失去了“ this”的范围
您可以这样尝试吗？
{
this.state.data.map(marker => {
return (
<Marker
onPress={() =>
this.props.navigation.navigate("LocationDetailScreen")
}
coordinate={{
latitude: marker.Lat_Long__Latitude__s,
longitude: marker.Lat_Long__Longitude__s
}}
title={marker.Name}
description="hello"
/>
);
});
}