response-native-snap-corousel: как вызвать функцию при нажатии элемента

Question

Я хочу вызвать функцию щелчка мышью на предмете в corousel. ниже мой код.

    onPress(){
       console.log("onPress");
    }
    _renderItem({item, index}) {
    return (
        <TouchableWithoutFeedback
          onPress={this.onPress.bind(this)}>
          <View style={styles.slide}>
            <Image
              source={{ uri: item.row.image_name }}
              style={styles.image}
            />

          </View>
        </TouchableWithoutFeedback>
      );
  }

Когда я нажимаю на элемент, я получаю сообщение об ошибке _this6.onPress is not a function,

Я могу предупреждать непосредственно о клике, как показано ниже.

<TouchableWithoutFeedback onPress={()=>{ Alert.alert("onPress");}}>

Как я могу вызвать метод на элементе click?

демонстрационный код: https://snack.expo.io/SJtm1vJMX

Answer 1

Все ваши функции должны быть связаны, чтобы не потерять контекст this, Это означает, что вам нужно сделать this._renderItem.bind(this) тоже.

Образец (удалены некоторые части для простоты)

export default class ImageCarousel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      slider1ActiveSlide: SLIDER_1_FIRST_ITEM,
    };
    this._renderItem = this._renderItem.bind(this);
    this.onPress = this.onPress.bind(this);
  }
  onPress() {
    Alert.alert('Hi');
  }
  _renderItem({ item, index }) {
    return (
      <TouchableOpacity onPress={this.onPress}>
        <Image style={styles.image} source={{ uri: item.illustration }} />
      </TouchableOpacity>
    );
  }

  mainExample(number, title) {
    const { slider1ActiveSlide } = this.state;
    return (
      <View>
        <Carousel
          ref={c => (this._slider1Ref = c)}
          data={ENTRIES1}
          renderItem={this._renderItem}
          {/* ... */}
        />
        {/* ... */}
      </View>
    );
  }

  render() {
    const example1 = this.mainExample(
      1,
      'Default layout | Loop | Autoplay | Scale | Opacity | Pagination with tappable dots'
    );
    return <ScrollView>{example1}</ScrollView>;
  }
}