は、ネイティブのスナップカルーセル

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私はsampleclass.js

どのようにすることができますの機能にカルーセルスワイプコンポーネントのたonPressイベントを処理する必要が

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' 
 
    } 
 
});

これを行うには、ネイティブの反応でonPressイベントを処理する方法を知っていますが、反応ネイティブスナップカロウでこれを行うことはできませんでした私は初めてドキュメントを使用していますが、これに関連するものは見つかりませんでした。

Answer 1

単一のカルーセルアイテムのonPress小物を処理する場合は、そのアイテムをレンダリングアイテムに追加する必要があります。

例動作するようですが、 が、私も同じ画像が押されているかどうかを確認する必要があり、それは** sampleclass.js内で定義された関数の中で行われている

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