我正在研究React本机应用程序。对于滑块部分,我放置了“Snap carousel”插件。我的滑块显示多个项目。到时间,计算除以窗口宽度/ 5的滑块项。现在我显示了5个滑块项目。
问题是,我需要显示 Activity 滑块项目的滑块文本并更改背景颜色。
在渲染项目中,我不能使用状态或 Prop 值。如何在渲染项方法中检查当前索引值?
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>
)
}
我只想显示 Activity 滑块项目的
{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>
关于javascript - 带状态值的React-Native-snap-carousel检查条件?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50564501/