попытка перейти к другому экрану при нажатии на маркер

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

Я пытаюсь перейти к выбранному экрану Phototag, когда один щелкает маркер, в настоящее время ничего не происходит при щелчке, навигация для остальной части приложения использует пояс на панели навигации, поэтому я не уверен, что могу использовать эти методы, я также хочу пройти объект маркера на новый экран, приложение создается с использованием Expo React Native


react-native reactjs javascript react-navigation
person Walter Shub    schedule 28.08.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

1, сначала привяжите его:

constructor(props) {
    super(props);

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

2, в этом случае вы можете напрямую вызвать props.navigation.navigate:

goTophototags() {
    this.props.navigation.navigate('phototag');
}
person Val    schedule 28.08.2017
comment
нет, все еще ничего, и я не понимаю, почему это сработает - person Walter Shub; 28.08.2017
comment
зачем использовать bind, прочитайте здесь facebook.github.io/react/docs/ обработка-событий.html - person Val; 28.08.2017
comment
для props.navigation.navigate со строкой так работает StackNavigator. reactnavigation.org/docs/intro/ - person Val; 28.08.2017
comment
только если он был передан в компонент в качестве реквизита. и эта привязка не должна иметь здесь значения, поскольку все это в одном контексте, если я не ошибаюсь? - person Walter Shub; 28.08.2017
comment
Даже если вы выберете способ NavigationActions.navigate, вы должны отправить его с помощью props.navigation... reactnavigation.org/docs /навигаторы/навигация-действия - person Val; 28.08.2017
comment
почему onPress={this.goTophototags} потерял контекст this, моя первая ссылка дает полную информацию. Пожалуйста, прочитайте об этом - person Val; 28.08.2017
comment
У меня все заработало, вы были правы, мне просто нужно было лучше понять реквизиты навигатора с других моих экранов. - person Walter Shub; 28.08.2017