react-native轮播图

下载

npm install react-native-swiper --save

一、水平轮播

import Swiper from 'react-native-swiper';


<View style={styles.swiper}>
  <Swiper
    autoplay
    showsPagination={false} //不显示指示器
    removeClippedSubviews={false}  //回到第一张不会闪烁
    >
    {data.map(item => (
      <View style={styles.banner} key={item.id}>
        <Image
          source={item.imageUri}
          style={{width: '100%', height: '100%'}}
        />
      </View>
    ))}
  </Swiper>
</View>

注：data为轮播数据 

二、垂直轮播

import Swiper from 'react-native-swiper';

<Swiper
    autoplay
    showsPagination={false} //不显示指示器
    removeClippedSubviews={false} //回到第一张不会闪烁
    horizontal={false}
    >
    {notice.map(item => (
      <Text
        key={item.id}
        style={{
          color: '#6D737D',
          fontSize: 13 * Height,
          fontFamily: 'PingFang Medium',
          lineHeight: 36 * Height,
        }}>
        {item.title}
      </Text>
    ))}
  </Swiper>

注：notiice为轮播数据