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

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

0 голосов
/ 26 июня 2018

Я хочу вызвать функцию при щелчке элемента в 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");}}>

Как я могу вызвать метод при щелчке элемента?

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

1 Ответ

0 голосов
/ 26 июня 2018

Все ваши функции должны быть связаны, чтобы не потерять контекст 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>;
  }
}
...