反應本地地圖點擊引腳將您帶到另一個屏幕

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