Actualmente estoy implementando una biblioteca de carrusel ( react-native-reanimated-carousel ). El código para lo siguiente se representa como tal:
<Carousel width={cardWidth} height={cardHeight} data={cards} onScrollEnd={() => {console.log('ended')}} renderItem={({item}) => ( <View> <Image source={{uri: item["ImgURL"],}} style={styles.card} /> </View> )} /> Al cambiar el carrusel, cambia el valor del item en la propiedad renderItem . ¿Hay alguna manera de obtener el valor del item desde fuera de este elemento? Quiero que otros elementos externos cambien según el valor (y las propiedades) del item .
Podría intentar llamar a una función de devolución de llamada en la función renderItem .
() => { const [activeItem, setActiveItem] = useState(cards[0].item); return (<Carousel width={cardWidth} height={cardHeight} data={cards} onScrollEnd={() => {console.log('ended')}} renderItem={({item}) => { setActiveItem(item); return ( <View> <Image source={{uri: item["ImgURL"],}} style={styles.card} /> </View> ); }} />) ); };O podría usar onScrollEnd. Proporciona el índice anterior y el índice actual de acuerdo con la documentación .
() => { const [activeItem, setActiveItem] = useState(cards[0].item); return (<Carousel width={cardWidth} height={cardHeight} data={cards} onScrollEnd={(previous, current) => { setActiveItem(cards[current].item); console.log('ended') }} renderItem={({item}) => ( <View> <Image source={{uri: item["ImgURL"],}} style={styles.card} /> </View> )} />) ); };O podría usar Ref prop getCurrentIndex