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 | 循环方向控制 |