Я работаю над реакцией на нативное приложение.Для слайдера я поставил плагин "Snap carousel".Мой слайдер показывает несколько элементов.По времени рассчитать элемент слайдера с делением на ширину окна / 5.Теперь у меня есть 5 элементов слайдера.
Проблема в том, что мне нужно показать текст слайдера для активного элемента слайдера и изменить цвет фона.
В элементе рендеринга я не могу использовать состояние илиценность реквизита.Как проверить текущее значение индекса в методе визуализации элемента?
constructor(props) {
super(props);
this.state = {
activeSlide:0
}
}
_renderItem ({item, index, currentIndex}) {
const self = this;
return (
<View style={styles.slide}>
<View style={stylesSelect.carouselImg}>
<Image
source={item.src}
resizeMode='cover'
/>
</View>
<Text>
{item.title}
</Text>
</View>
);
}
render() {
const { data } = this.props;
return (
<View style={styles.container}>
<Carousel
ref={(c) => { this._carousel = c; }}
data={data}
renderItem={this._renderItem}
sliderWidth={width}
itemWidth={Math.round(width/5)}
sliderHeight={height}
itemHeight={height}
inactiveSlideScale={0.8}
inactiveSlideOpacity={0.7}
loop={true}
onSnapToItem={(index) => this.setState({ activeSlide: index }) }
/>
</View>
)
}
Я хочу показать текст {item.title}
только для активного элемента слайдера.