无意间发现React的版本又更新到了0.51了。这又意味着某些群体面临的踩坑时节的到来。（啊哈哈哈！！想想就觉得特别开心）
如此便来抢先看看RN公主这次又描的是哪处眉。
用手动去计算偏移量并且下载定时器的方法去封装轮播图功能显得太过繁琐。正所谓他山之石可以攻玉。显然，引用已经封装好的三方开源组件能让我们在编写代码时事半功倍。而react-native-swiper正是一个能用于做轮播效果的三方组件。
1、github上的实例：
https://github.com/leecade/react-native-swiper
2、基本命令
安装：npm i react-native-swiper --save
查看：npm view react-native-swiper
删除：npm rm react-native-swiper --save
3、属性
所有ScrollView组件拥有的属性react-native-swiper都拥有。
- Basic
| 属性 | 默认值 | 类型 | 描述 |
|---|---|---|---|
| horizontal | true | bool | 设置轮播方向 |
| loop | true | bool | 是否循环播放 |
| index | 0 | number | 初始进入页面标识为0的页面 |
| showsButtons | false | bool | 是否显示控制按钮（即左右两侧的箭头是否可见） |
| autoPlay | false | bool | 是否自动轮播 |
| onIndexChanged | (index)=>null | func | 当用户拖拽时更新索引调用 |
- Custom basic style & content
| 属性 | 默认值 | 类型 | 描述 |
|---|---|---|---|
| width | - | number | 宽度，默认flex：1全屏 |
| height | - | number | 高度，默认flex：1全屏 |
| index | 0 | number | 初始进入页面标识为0的页面 |
| style | {...} | style | 只加载当前索引 |
| loadMinimal | false | bool | 只加载当前索引 |
| loadMinimalSize | 1 | bumber | 查看当前索引 |
| loadMinimalLoader | element | 自定义预加载样式 |
- Pagination
| 属性 | 默认值 | 类型 | 描述 |
|---|---|---|---|
| showsPagination | true | bool | 在页面下边显示圆点，以表明当前页面位于第几个 |
| renderPagination | - | func | 通过三个参数（index,total,context）去渲染如何分页 |
| dot | element | 允许自定义元素样式 | |
| activeDot | element | 允许自定义当前选择点元素样式 | |
| dotStyle | - | object | 允许自定义当前选择点元素样式 |
- AutoPlay
| 属性 | 默认值 | 类型 | 描述 |
|---|---|---|---|
| autoplay | true | bool | 设置轮播图为自动播放模式 |
| autoplayTimeout | 2.5 | number | 设置轮播间隔 |
| autoplayDirection | ture | bool | 控制轮播图是否循环 |
使用方式
- 引用外部组件
import Swiper from 'react-native-swiper';
- 在render方法中返回swiper组件
showsButtons代表向左向右滑的指示按钮
Hello Swiper
Beautiful
And simple
- 设置样式
设置每个view全屏显示。view里面的内容居中。
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'
}
- 导入外部组件、通过Dimension获取屏幕宽度。{width}代表ES6语法的解构赋值
import {
Platform,
StyleSheet,
Text,
View,
Image,
Dimensions
} from 'react-native';
import Swiper from 'react-native-swiper';
const {width} = Dimensions.get('window'); //解构赋值 获取屏幕宽度
- 在render方法中返回一个顶级组件View。里面装载两个swiper
第一个轮播图设置为竖向滚动，第二个轮播图设置为横向滚动。同时设置他们自动播放。
export default class App extends Component<{}> {
render() {
return (
{/*设置horizontal为竖向排列 autoplay为自动播放*/}
Hello Swiper
Beautiful
And simple
console.log('index:', state.index)}
dot={
Aussie tourist dies at Bali hotel
Big lie behind Nine’s new show
Why Stone split from Garfield
Learn from Kim K to land that job
);
}
}
- 设置样式
const styles = StyleSheet.create({
container: {
flex: 1
},
wrapper: {
},
slide: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'transparent'
},
slide1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold'
},
image: {
width:width,
flex: 1
}
});