美文网首页
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