如何在反应原生快照轮播中处理 Onpress 事件答案

【问题标题】：how to handle Onpress events in react native snap carousel如何在反应原生快照轮播中处理 Onpress 事件
【发布时间】：2018-02-15 23:42:06
【问题描述】：

我有一个班级，在那个班级中我正在展示这样的轮播组件

sampleclass.js

.
.
. 
render{
return (
<Image ..> 
<Text>
text 
</Text>
<Image ..>
<js file tag where carousel is defined />
</Image>

<Text>
text 
</Text>
<Image ..>
<js file tag where carousel is defined />
</Image>
.
.
.
</Image>
);
}

function fname(params..){
I also need to access carousel ref here 
}

我还有另一个类，我已经定义了 carousel

carouselclass.js

import React, { PureComponent } from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';

import Carousel from 'react-native-snap-carousel';

export default class ExampleCarousel extends PureComponent {
    state = {
        data: [{}, {}, {}, {}, {}, {}]
    }

    renderItem = () => (
        <View style={styles.tile} />
    );

    render () {
        return (
            <View style={styles.container}>
                <Carousel
                  data={this.state.data}
                  renderItem={this.renderItem}
                  itemWidth={Dimensions.get('window').width * 0.85}
                  sliderWidth={Dimensions.get('window').width}
                  containerCustomStyle={styles.carousel}
                  slideStyle={{ flex: 1 }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 300
    },
    carousel: {
        flex: 1,
        backgroundColor: 'red'
    },
    tile: {
        flex: 1,
        width: Dimensions.get('window').width * 0.85,
        backgroundColor: 'yellow'
    }
});

我要在sampleclass.js的函数中处理carousel swipe组件的onPress事件

我怎么能做到这一点我知道如何在 react native 上处理 onPress 事件，但无法使用 react-native-snap-carousel 做到这一点，因为我是第一次使用它，我已经阅读了文档中给出的示例但找不到与此有关的东西

【问题讨论】：

标签： javascript react-native

【解决方案1】：

如果您想处理单个 Carousel 项的 onPress 属性，您需要将其添加到您的渲染项中。

示例

// change this
renderItem = () => (
    <View style={styles.tile} />
);

// to this
_onPressCarousel = () => {
    // here handle carousel press
}
renderItem = () => (
    <TouchableOpacity onPress={this._onPressCarousel} style={styles.tile}>
        <Image
            style={styles.button}
            source={require('./myButton.png')}
        />
    </TouchableOpacity>
);

【讨论】：

嘿，谢谢，这似乎可行，但我还需要检查是否按下了相同的图像，并且这是在 sampleclass.js 中定义的函数中完成的，其中有 2 个字段轮播滑动组件出现，它们都有相同的 8 个滑动组件，这就是你需要检查这个我该怎么做

【解决方案2】：

<Carousel
...
  renderItem={(carousel, parallaxProps) =>
    this._renderItem(carousel, parallaxProps)
}
...
/>


_renderItem(carousel, parallaxProps) {
  const { item } = carousel;
  return (
    <TouchableOpacity
      onPress={() => {
        this._handlePress(item._id);
      }}
    >
    ...

【讨论】：

请在您的回答中添加有关导致问题的原因以及您如何解决问题的详细信息。