React Native Snap Carousel如何结合状态值判断并显示激活项文本

我来帮你搞定这个问题！核心要解决两个点：让_renderItem能访问到组件的状态，以及准确判断当前项是否为激活项，下面一步步拆解：

1. 先给_renderItem绑定组件上下文 #

你现在的_renderItem方法没法直接用this.state，是因为它的上下文没绑定到组件实例上。有两种简单的绑定方式：

方式一：在构造器里绑定 #

constructor(props) {
 super(props);
 this.state = { activeSlide:0 }
 // 把_renderItem的this绑定到当前组件实例
 this._renderItem = this._renderItem.bind(this);
}

方式二：用箭头函数定义方法 #

箭头函数会自动继承当前上下文，省去手动绑定的步骤：

// 直接把_renderItem定义成箭头函数
_renderItem = ({item, index, currentIndex}) => {
 // 这里可以直接访问this.state了
}

2. 判断激活项并动态设置样式/文本显示 #

现在_renderItem能拿到this.state.activeSlide了，我们就可以对比当前项的index和激活索引，来控制样式和文本的显示：

_renderItem ({item, index}) {
 // 判断当前项是否是激活状态
 const isActive = index === this.state.activeSlide;
 // 动态组合样式：激活项用自定义背景色，非激活项用默认样式
 const slideStyle = [
   styles.slide,
   isActive ? { backgroundColor: '#ff6347' } : {}
 ];

 return (
  <View style={slideStyle}>
   <View style={stylesSelect.carouselImg}>
    <Image source={item.src} resizeMode='cover' />
   </View>
   {/* 只有激活项才显示title文本 */}
   {isActive && <Text> {item.title} </Text>}
  </View>
 );
}

补充：用Snap Carousel自带的currentIndex参数 #

其实Snap Carousel的renderItem回调本身就提供了currentIndex（当前激活项的索引），你也可以直接用它判断，不需要依赖组件状态：

_renderItem ({item, index, currentIndex}) {
 const isActive = index === currentIndex;
 // 后续样式和文本控制逻辑和上面一致
}

两种方式都可行，看你更习惯哪种。

完整修改后的代码 #

constructor(props) {
 super(props);
 this.state = { activeSlide:0 }
 // 绑定上下文
 this._renderItem = this._renderItem.bind(this);
}

_renderItem ({item, index}) {
 const isActive = index === this.state.activeSlide;
 const slideStyle = [
   styles.slide,
   isActive ? { backgroundColor: '#ff6347' } : {}
 ];

 return (
  <View style={slideStyle}>
   <View style={stylesSelect.carouselImg}>
    <Image source={item.src} resizeMode='cover' />
   </View>
   {isActive && <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并修改背景色的需求啦！

内容的提问来源于stack exchange，提问作者vijayaganth