反应本地地图点击引脚将您带到另一个屏幕

Question

我目前正在通过为某人构建移动应用程序来学习反应。 该应用程序的目的是要有一个地图视图与别针，当你点击一个别针带你到另一个屏幕，你应该查看评论，并能发表评论。我尝试点击图片并使页面呈现另一个视图时遇到问题。我尝试使用反应导航器，但是当我点击该引脚时没有任何反应。任何建议或教程将不胜感激。

这是当前的代码：

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight 
} from 'react-native'; 
import MapView from 'react-native-maps'; 
import { StackNavigator } from 'react-navigation'; 

class SnapScene extends Component { 

    render() { 
    return (
     <View style={styles.container}> 
     <MapView 
     style={styles.map} 
     initialRegion={{ 
      latitude: 37.78825, 
      longitude: -122.4324, 
      latitudeDelta: 0.0922, 
      longitudeDelta: 0.0421, 
     }}> 
     <MapView.Marker 
      coordinate={{ 
       latitude: 37.78825, 
       longitude: -122.4324, 
     }} 
      title = 'Accident'> 
       <MapView.Callout tooltip style={styles.container}> 
             <TouchableHighlight onPress={() => navigate('Chat')} 
               title="Chat with Lucy" 
              underlayColor='#dddddd'> 
              <Text>We must go derper</Text> 
             </TouchableHighlight> 
       </MapView.Callout> 
      </MapView.Marker> 
     </MapView> 

     </View> 
    ); 
    } 
} 

class ChatScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Chat with Lucy', 
    }; 
    render() { 
    return (
     <View> 
     <Text>Chat with Lucy</Text> 
     </View> 
    ); 
    } 
} 

const SnapSceneApp = StackNavigator({ 
    Home: { screen: SnapScene }, 
    Chat: { screen: ChatScreen }, 
}); 

Answer 1

你需要有标注的功能看起来像这样：

navigateToView(viewName:string) { 
    const { navigate } = this.props.navigation; 

    navigate(viewName); 
} 

然后，只需调用它的标注： <TouchableHighlight onPress={() => this.navigateToView('Chat')}