Question

我目前正在学习通过为某人构建移动应用程序来做出反应。该应用程序的目的是使用带有引脚的地图视图，当您单击某个引脚以转到另一个屏幕时，您应该在该屏幕上查看注释并能够发表注释。我在尝试点击图片并使页面呈现另一个视图时遇到问题。我尝试使用react navigator但是当我点击引脚时没有任何反应。任何建议或教程将不胜感激。

这是当前的代码：

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

你需要具有这样的标注功能：

<TouchableHighlight onPress={() => this.navigateToView('Chat')}

然后在callout中调用它： <ImageButton android:id="@+id/Collecte" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_marginTop="50dip" android:layout_marginLeft="25dip" android:background="@android:color/transparent" android:src= "@drawable/nouvellecampagne" />

React native maps单击pin可将您带到另一个屏幕

1 个答案: