Блог

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

 // 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 внутри обработчиков печати. Я решил эту проблему в представлении списка и исправлю ее в представлении карты, как только запущу обработчики.

Когда я нажимаю на сенсорные элементы в представлении списка, в консоли отладчика отображается «щелкнуть текст». Когда я нажимаю на сенсорный объект в выноске карты, нигде ничего не происходит.

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

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