单击标记时尝试导航到另一个屏幕

Question

import React from 'react';
import { MapView } from 'expo';
import db from '../db';
import { createRouter, NavigationProvider, StackNavigation } from '@expo/ex-navigation';
import selectedPhototag from '../screens/selectedPhototag';
import { StackNavigator, NavigationActions } from 'react-navigation';

const nav = StackNavigator({
  phototag: {
    screen: selectedPhototag,
  },
});

export default class MapScreen extends React.Component {
  state = {
    markers: [],
  };
  componentWillMount() {
    db.child('phototags').once('value').then(photoTags => {
      let dataArray = [];
      for (var key in photoTags.val()) {
        dataArray.push(photoTags.val()[key]);
      }
      this.setState({ markers: dataArray }, () => {
        // console.log('[MapScreen] data', this.state.markers);
      });
    });
  }

  goTophototags() {
    NavigationActions.navigate({ routeName: nav.phototag });
  }

  render() {
    return (
      <MapView
        provider={MapView.PROVIDER_GOOGLE}
        style={{ flex: 1 }}
        initialRegion={{
          latitude: 40.750355960509054,
          longitude: -73.97669815393424,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}>
        {this.state.markers.map((marker, i) =>
          <MapView.Marker
            key={i}
            coordinate={{
              latitude: marker.locationLat,
              longitude: marker.locationLong,
            }}
            title={marker.description}
            onPress={this.goTophototags}
          />
        )}
      </MapView>
    );
  }
}

我正在尝试导航到 selectedPhototag 屏幕，当点击一个标记时，目前点击没有任何反应，应用程序其余部分的导航使用导航栏中的皮带，所以我不确定我是否可以使用这些方法，我还想将标记对象传递到新屏幕，该应用程序正在使用 Expo React Native

Answer 1

1、先绑定：

constructor(props) {
    super(props);

    this.goTophototags = this.goTophototags.bind(this);
}

2、这种情况可以直接调用props.navigation.navigate：

goTophototags() {
    this.props.navigation.navigate('phototag');
}

单击标记时尝试导航到另一个屏幕

trying to navigate to anther screen when clicking on a marker

javascript

reactjs

react-native

react-navigation