Как использовать TouchableOpacity внутри выноски карты? - PullRequest
Новая
       3

Как использовать TouchableOpacity внутри выноски карты?

1 голос
/ 02 апреля 2019

У меня есть компонент, который я использую как для ячеек в результатах списка, так и для подробного выноски на карте. 

// StationCellView

export default class StationCellView extends Component {
  onTextPress() {
    console.log("click text");
    this.props.navigation.navigate("UserDetail", { user: this.props.station.user });
  }
  onImagePress() {
    console.log("click image");
    this.props.navigation.navigate("StationDetail", { station: this.props.station });
  }

  render() {
    return (
      <View style={styles.cellContainer}>
        <TouchableOpacity
          style={styles.textContainer}
          onPress={this.onTextPress}
        >
          <CellTextRow style={text.name}>{this.props.station.name}</CellTextRow>

          //...etc some more rows

        </TouchableOpacity>

      </View>
    );
  }
}

// from MapResultsView

  renderItem = ({ item }) => (
    <StationCellView station={item} navigation={this.props.navigation} />
  );

  render() {
    return (
      <FlatList
        style={{ marginLeft: 5, marginRight: 5 }}
        data={this.results}
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItem}
      />
    );
  }

TouchableOpacity отлично работает, когда я просматриваю список. Однако метод onPress не вызывается, когда StationCellView используется внутри выноски карты: 

// from MapView

  renderMarkers() {
    return this.state.stations.map(station => {
      const logo = require("../assets/logos/BOLTIcon.jpg");
      return (
        <Marker
          coordinate={{
            latitude: station.location.lat,
            longitude: station.location.lng
          }}
          key={station.location.lat.toString() + station.location.lng.toString()}
        >
          <Callout>
            <StationCellView station={station}/>
          </Callout>
        </Marker>
      );
    });
  }

 render() {
    return (
      <View style={styles.container}>
        <MapView
          style={{ flex: 1 }}
          region={this.state.region}
          showsUserLocation={true}
        >
          {this.renderMarkers()}
        </MapView>
        <Callout style={styles.searchCallout}>
          <TextInput
            onChangeText={searchText => this.setState({ searchText })}
            // ... props ...
          />
        </Callout>
      </View>
    );
  }

Пожалуйста, пока игнорируйте проблемы с вызовом this.props.navigation.navigate внутри обработчиков печати. Я решил это в виде списка, и я исправлю это в виде карты, как только получу обработчики.

Когда я щелкаю Touchables в представлении списка, в консоли отладчика появляется «click text». Когда я нажимаю на Touchable из выноски карты, ничего не происходит.

Может быть, отмечается, что при первом нажатии на Touchable на карте изменяется прозрачность, но если я нажимаю ее снова, ничего не происходит.

Я предполагаю, что есть какая-то проблема с тем, как карты и выноски работают в иерархии представлений? Кто-нибудь знает?

...