响应本地地图，单击pin将您带到另一个屏幕。

Question

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

这是当前的代码：

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