ネイティブマップをクリックして別の画面に移動するにはピンをクリックしてください

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')}