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'
    }
})