react native 第三方组件react-native-swiper 轮播组件

github地址：https://github.com/leecade/react-native-swiper

使用方法：安装：npm i react-native-swiper –save

查看模块：npm view react-native-swiper 
删除模块：npm rm react-native-swiper –save (这个添加save会在删除的同时去除package.json中的依赖) 
查看帮助命令：npm help 命令 （例如npm help -i查看i的使用)

基本用法

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
    ViewPagerAndroid,
    Navigator,
    View
    } from 'react-native';

import Swiper from 'react-native-swiper';

class hello extends Component {
  render() {
    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5',
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  }
});


AppRegistry.registerComponent('hello', () => hello);

 效果：

详细属性

接下来让我们好好探索一下这个框架的基本属性：

基本属性：

Prop	Default	Type	Description
horizontal	true	boolean	为false提示小圆点在侧面
loop	true	boolean	设置为false以禁用连续循环模式
index	0	int	默认显示第几页
showsButtons	false	int	设置为true显示button
autoplay	false	boolean	设置为true将启用自动播放模式。

下面演示一下下面这些样式的效果 我设置默认选择第二页，显示button，小圆点在最下面，禁用无限循环。
<Swiper style={styles.wrapper} showsButtons={true} horizontal={true} loop={false} index={1}>
        <View style={styles.slide1}>
          <Text style={styles.text}>我是第一页</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>我是第二页</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>我是第三页</Text>
        </View>
      </Swiper>

 

自定义基本样式

Prop	Default	Type	Description
width	-/-	number	默认flex：1
height	-/-	number	默认flex：1
style	{…}	style	请参阅源中的默认样式。
loadMinimal	false	boolean	只加载当前索引幻灯片
loadMinimalSize	1	number	请参阅loadMinimal
loadMinimalLoader	《ActivityIndicator/》	element	在未加载幻灯片时显示自定义加载程序

设置宽高为200，200，loadMinimal为true加载当前索引幻灯片。

<Swiper style={styles.wrapper}
              showsButtons={true}
              horizontal={true} 
              loop={false} 
              index={1}
              loadMinimal={true}>

可以看出宽高都有了变化 而且只加载了一个 
视图，其他的都是空白的 
当我们把loadMinimal设置为true同时，loadMinimalSize设置为3这时候就回复正常了，让我们看一下效果：

<Swiper style={styles.wrapper}
              showsButtons={true}
              horizontal={true} 
              loop={false} 
              index={1}

              loadMinimal={true}
              loadMinimalSize={3}

             >

 

Prop	Default	Type	Description
showsPagination	true	boolean	设置为true可使分页可见
paginationStyle	{…}	style	自定义样式将与默认样式合并
renderPagination	-/-	function	通过三个参数(index, total, context)确定如何渲染
dot	《View style={{backgroundColor:’rgba(0,0,0,.2)’, width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /》	element	允许自定义点元素
activeDot	《View style={{backgroundColor: ‘#007aff’, width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /》	element	允许自定义active-dot元素

接下来让我们看一个分页的demo： 
先看一下效果：

修改小圆尖头样式

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
    ViewPagerAndroid,
    Navigator,
    View,
    Dimensions
    } from 'react-native';

import Swiper from 'react-native-swiper';

const { width } = Dimensions.get('window')

class hello extends Component {
  render() {
    return (
      <View>
        <Swiper style={styles.wrapper} height={200} horizontal={true} autoplay={true}>
          <View style={styles.slide1}>
            <Text style={styles.text}>第一页</Text>
          </View>
          <View style={styles.slide2}>
            <Text style={styles.text}>第二页</Text>
          </View>
          <View style={styles.slide3}>
            <Text style={styles.text}>第三页</Text>
          </View>
        </Swiper>

        <Swiper style={styles.wrapper} height={240}
          dot={<View style={{backgroundColor: 'rgba(0,0,0,.2)', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
          activeDot={<View style={{backgroundColor: '#000', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
          paginationStyle={{
            bottom: -23, left: null, right: 10
          }} loop>
          <View style={styles.slide} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
            <Image resizeMode='stretch' style={styles.image} source={require('./imgs/1.jpg')} />
          </View>
          <View style={styles.slide} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}>
            <Image resizeMode='stretch' style={styles.image} source={require('./imgs/2.jpg')} />
          </View>
          <View style={styles.slide} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
            <Image resizeMode='stretch' style={styles.image} source={require('./imgs/3.jpg')} />
          </View>
          <View style={styles.slide} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
            <Image resizeMode='stretch' style={styles.image} source={require('./imgs/4.jpg')} />
          </View>
        </Swiper>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
  },

  slide: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },

  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },

  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },

  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },

  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  },

  image: {
    width,
    flex: 1
  }
});
AppRegistry.registerComponent('hello', () => hello);

 

 

 

Autoplay自动换图

Prop	Default	Type	Description
autoplay	true	boolean	设置为true将启用自动播放模式
autoplayTimeout	2.5	number	延迟时间（秒
autoplayDirection	true	boolean	循环方向控制

 

转载于:https://www.cnblogs.com/allenxieyusheng/p/6836228.html