javascript - 如何在 react native 快照轮播中处理 Onpress 事件

Question

我有一个类，在该类中我正在显示这样的轮播组件

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 
}

我还有另一个类，我在其中定义了 轮播

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的函数中处理轮播滑动组件的onPress事件

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

Answer 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>
);