Я работаю над реагирующим нативным приложением. Для части слайдера я поставил плагин "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}
Text только для активного элемента ползунка.
._renderItem
у вас есть индекс и активный индекс, можете ли вы сделать{this.state.activeSlide === index && <Text>{item.title}</Text>}
? - person   schedule 28.05.2018this.state.activeSlide
в методеrenderItem
. - person vijayaganth   schedule 28.05.2018