美文网首页
react-native-snap-carousel 使用

react-native-snap-carousel 使用

作者: JsLin_ | 来源:发表于2018-11-08 09:40 被阅读0次

    开发中我们经常用到通知栏,

    react-native-snap-carousel 这个组件很强大 ,下面介绍下如何实现这种通知栏效果:

    image.png
     _renderItem({ item, index }) {
        return (
          <View style={styles.carouView} key={`entry-${index}`} numberOfLines={1}>
            <Text style={styles.daikuanText}>{`银行卡${item.bankeNo}尾号,放款${
              item.mony
            }元`}</Text>
          </View>
        );
      }
    
    
    
       <Carousel
                      ref={c => {
                        this._slider1Ref = c;
                      }}
                      data={this.state.noticeData}
                      renderItem={this._renderItem}
                      sliderWidth={ViewUtil.size.width - 30}
                      sliderHeight={44}
                      itemHeight={44}
                      itemWidth={ViewUtil.size.width - 30}
                      vertical={true}
                      activeSlideOffset={0}
                      autoplay={true}
                      loop={true}
                      autoplayDelay={500}
                      autoplayInterval={3000}
                    />
    

    相关文章

      网友评论

          本文标题:react-native-snap-carousel 使用

          本文链接:https://www.haomeiwen.com/subject/kruixqtx.html