[英]React-Native-snap-carousel check condition with state value?
I'm working on react native app.我正在研究本机应用程序。 For slider part I put "Snap carousel" plugin.对于滑块部分,我放置了“Snap carousel”插件。 My slider is showing multiple item.我的滑块显示多个项目。 By the time calculate slider item with divide by window width/5.按时间计算滑块项,除以窗口宽度/5。 Now I got 5 slider item on display.现在我展示了 5 个滑块项目。
The problem is, I need to show slider text for active slider item and change background color.问题是,我需要显示活动滑块项目的滑块文本并更改背景颜色。
In render item I can't use state or props value.在渲染项中,我不能使用 state 或 props 值。 How can I check with current index value in render item method?如何在渲染项方法中检查当前索引值?
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>
)
}
I want to show the {item.title}
Text for active slider item only.我只想显示活动滑块项目的{item.title}
文本。
renderItem = data =>
<View>
<TouchableOpacity >
{/* {console.log("==================================")}
{console.log(data)} */}
<ImageLoad
style={{ height: 200, width: itemWidth, borderRadius: theme.sizes.itemRadius }}
placeholderSource={require('./images/logo.png')}
source={{ uri: data.item.thumbnail }}
resizeMode={'contain'}
isShowActivity={true}
borderRadius={theme.sizes.itemRadius}
placeholderStyle={{ height: 200, width: itemWidth, borderRadius: theme.sizes.itemRadius }}
/>
<View style={styles.featuredDiv}><Text style={styles.title}>{data.item.title}</Text></View>
</TouchableOpacity>
</View>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.