1.0.1 • Published 4 years ago
react-native-rate-swiper v1.0.1
react-native-rate-swiper
两边可以各种漏出一部分的swiper,当item移动的时候item的大小会进行缩放。
效果
install
npm install react-native-rate-swiper
说明
/**
*支持参数:
*startIndex:初始化时显示第几页,默认值0
*rate:左右显示的部分高度比例 默认值1 (0< x <=1)
*width,height
*placeHoldWidth 左右显示部分宽度 默认40
*loop 是否循环滚动 默认 true
*autoPlay 自动播放 默认 true
*autoplayInterval 默认 3000
*autoplayDelay 默认 0
*scrollTo(index) 0 <= index <children.lenght
*item可用区域{w:width-placeHoldWidth*2,h:height}
*/
Demo
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Swiper } from 'react-native-rate-swiper'
export default class Demo extends Component {
render() {
const imgWidth = 400;
const imgHeigt = 200;
const list = ['11', '22', '33', '44', '55'];
return (
<View style={styles.view}>
<Swiper
width={imgWidth}
height={imgHeigt}
rate={0.9}
loop={true}
autoPlay={false}
startIndex={1}
placeHoldWidth={60}
ref={e => { this.scroll = e; }}
onChanged={(newIndex, oldIndex) => { console.log(`${oldIndex} --> ${newIndex}`) }}
>
{
list.map((item, index) => (
<View style={styles.imageContainer} key={index}>
<View style={styles.innerView}>
<Text style={styles.txt}>{index}</Text>
<TouchableOpacity activeOpacity={0.9} onPress={() => { console.log(`${index} clicked`); console.log(`${item} clicked`) }}>
<View style={styles.button}>
<Text>button</Text>
</View>
</TouchableOpacity>
</View>
</View>
))
}
</Swiper>
<TouchableOpacity
activeOpacity={0.9}
onPress={() => {
this.scroll.scrollTo(3)
}}
>
<View style={styles.button}>
<Text>goto 3</Text>
</View>
</TouchableOpacity>
</View>
);
}
onPress(item, index) {
console.log(item, index);
}
}
const styles = StyleSheet.create({
view: {
alignSelf: 'center',
height: 700,
backgroundColor: 'blue',
justifyContent: 'center'
},
imageContainer: {
width: '100%',
height: '100%',
},
btn: {
width: '100%',
height: '100%',
},
innerView: {
// marginHorizontal: 4,
height: '100%',
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center'
},
txt: {
fontSize: 30
},
button: {
alignSelf: 'center',
marginTop: 80,
width: 200,
height: 40,
backgroundColor: 'yellow',
justifyContent: 'center',
alignItems: 'center'
}
})