react-native-snap-carousel 轮播

react-native-snap-carousel 轮播

1. 安装以及使用

yarn add react-native-snap-carousel -S
或
npm install react-native-snap-carousel -S

使用
import Carousel from 'react-native-snap-carousel';

2. <ParallaxImage /> component

2.1 示例(右边为我们做出的真实效果)

图2-1

图2-2

2.2 示例代码

import * as React from 'react';
import {
    Text,
    View,
    SafeAreaView,
    Dimensions,
    StyleSheet,
} from 'react-native';

import Carousel, {ParallaxImage} from 'react-native-snap-carousel';

const { width} = Dimensions.get('window')
class Carousel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // 这个就是传入的数据，如果是请求后台的数据的话，只要和下面这个对象数组格式保持一致就好
            entries: [
                {
                    title: 'Beautiful and dramatic Antelope Canyon',
                    subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
                    illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596609990165&di=d35d99a47ba08dc9e3220d8515936230&imgtype=0&src=http%3A%2F%2Fwww.wodejia0.com%2Fimages%2Fobuwgnbonzuxa2ldfzrw63i%2F20090810%2F3114308_003924034_2.jpg',
                },
                {
                    title: 'Earlier this morning, NYC',
                    subtitle: 'Lorem ipsum dolor sit amet',
                    illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596609997081&di=5492fbd5f7dfb9dc72761e07e95809c2&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201411%2F20%2F145145w5u4504gu4th7g0z.jpg',
                },
                {
                    title: 'White Pocket Sunset',
                    subtitle: 'Lorem ipsum dolor sit amet et nuncat ',
                    illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596609993973&di=258911ca593f9659a47e5f4fe601f466&imgtype=0&src=http%3A%2F%2Fimg.ewebweb.com%2Fuploads%2F20191006%2F19%2F1570360737-HvGOTkxnum.jpg',
                },
            ],
        }
    }

    _renderItem ({item, index}, parallaxProps) {
        return (
            <View style={styles.item}>
                <ParallaxImage
                    source={{ uri: item.illustration }}
                    containerStyle={styles.imageContainer}
                    style={styles.image}
                    parallaxFactor={0.4}
                    {...parallaxProps}
                />
                <Text style={styles.title} numberOfLines={2}>
                    {item.title}
                </Text>
            </View>
        );
    }

    render () {
        return (
            <View style={styles.carousel_container}>
                <Carousel
                    sliderWidth={width}
                    sliderHeight={width}
                    itemWidth={width - 60}
                    data={this.state.entries}
                    renderItem={this._renderItem}
                    hasParallaxImages={true}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    carousel_container: {
        marginTop: 40,
    },
    item: {
        flexDirection: 'row',
        justifyContent: 'center',
        width: width - 60,
        height: width - 80,
    },
    title: {
        display: 'flex',
        position: 'absolute',
        bottom: 10,
        color: 'white',
        // backgroundColor: 'rgba(208, 208, 208, .6)',
        width: '100%',
        height: 45,
        lineHeight: 45,
        fontSize: 20,
        paddingLeft: 10,
        borderWidth: 5,
        borderTopWidth: 0,
        borderBottomWidth: 0,
        borderLeftWidth: 5,
        borderRightWidth: 0,
        borderLeftColor: '#3399FF'
    },
    imageContainer: {
        flex: 1,
        marginBottom: Platform.select({ ios: 0, android: 1 }),
        backgroundColor: 'white',
        borderRadius: 8,
    },
    image: {
        ...StyleSheet.absoluteFillObject,
        resizeMode: 'cover',
    },
})

export default Carousel;

3. <Pagination /> component

3.1 示例(下面为我们做出的真实效果)

图3-1

图3-2

3.2 示例代码

import * as React from 'react';
import {
    Text,
    View,
    SafeAreaView,
    Dimensions,
    StyleSheet,
} from 'react-native';

import Carousel, {Pagination} from 'react-native-snap-carousel';

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

class Carousel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeSlide: 0,
            entries: [
                {
                    title: 'Beautiful and dramatic Antelope Canyon',
                    subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
                    illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596609990165&di=d35d99a47ba08dc9e3220d8515936230&imgtype=0&src=http%3A%2F%2Fwww.wodejia0.com%2Fimages%2Fobuwgnbonzuxa2ldfzrw63i%2F20090810%2F3114308_003924034_2.jpg',
                },
                {
                    title: 'Earlier this morning, NYC',
                    subtitle: 'Lorem ipsum dolor sit amet',
                    illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596609997081&di=5492fbd5f7dfb9dc72761e07e95809c2&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201411%2F20%2F145145w5u4504gu4th7g0z.jpg',
                },
                {
                    title: 'White Pocket Sunset',
                    subtitle: 'Lorem ipsum dolor sit amet et nuncat ',
                    illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596609993973&di=258911ca593f9659a47e5f4fe601f466&imgtype=0&src=http%3A%2F%2Fimg.ewebweb.com%2Fuploads%2F20191006%2F19%2F1570360737-HvGOTkxnum.jpg',
                },
                {
                    title: 'Acrocorinth, Greece',
                    subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
                    illustration: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2759078875,3643456742&fm=26&gp=0.jpg',
                },
                {
                    title: 'The lone tree, majestic landscape of New Zealand',
                    subtitle: 'Lorem ipsum dolor sit amet',
                    illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596620354134&di=b809b4f153feb0b52cc2be9cbc85475e&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1207%2F18%2Fc1%2F12378628_1342603613470.jpg',
                },
            ],
        }
    }

    _renderItem({item, index}, parallaxProps) {
        return (
            <View style={styles.item}>
                <ParallaxImage
                    source={{uri: item.illustration}}
                    containerStyle={styles.imageContainer}
                    style={styles.image}
                    parallaxFactor={0.4}
                    {...parallaxProps}
                />
                <Text style={styles.title} numberOfLines={2}>
                    {item.title}
                </Text>
            </View>
        );
    }
    get pagination() {
        const { entries, activeSlide } = this.state;
        return (
            <Pagination
                dotsLength={entries.length}
                activeDotIndex={activeSlide}
                containerStyle={{ backgroundColor: 'rgba(208, 208, 208, 0)' }}
                dotStyle={{
                    width: 10,
                    height: 10,
                    borderRadius: 5,
                    marginHorizontal: 8,
                    backgroundColor: 'rgba(0, 0, 0, 0.5)'
                }}
                inactiveDotStyle={{
                    // Define styles for inactive dots here
                }}
                inactiveDotOpacity={0.4}
                inactiveDotScale={0.6}
            />
        );
    }

    render () {
        return (
            <View style={styles.carousel_container}>
                <Carousel
                    sliderWidth={width}
                    sliderHeight={width}
                    itemWidth={width - 60}
                    data={this.state.entries}
                    renderItem={this._renderItem}
                    hasParallaxImages={true}
                    onSnapToItem={(index) => this.setState({ activeSlide: index }) }
                />
                { this.pagination }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    carousel_container: {
        marginTop: 40,
        // backgroundColor: 'rgba(208, 208, 208, .6)',
    },
    item: {
        flexDirection: 'row',
        justifyContent: 'center',
        width: width - 60,
        height: width - 80,
    },
    title: {
        display: 'flex',
        position: 'absolute',
        bottom: 10,
        color: 'white',
        // backgroundColor: 'rgba(208, 208, 208, .6)',
        width: '100%',
        height: 45,
        lineHeight: 45,
        fontSize: 20,
        paddingLeft: 10,
        borderWidth: 5,
        borderTopWidth: 0,
        borderBottomWidth: 0,
        borderLeftWidth: 5,
        borderRightWidth: 0,
        borderLeftColor: '#3399FF'
    },
    imageContainer: {
        flex: 1,
        marginBottom: Platform.select({ ios: 0, android: 1 }),
        backgroundColor: 'white',
        borderRadius: 8,
    },
    image: {
        ...StyleSheet.absoluteFillObject,
        resizeMode: 'cover',
    },
})

export default Carousel;

4. 如果你想查看更多参数可以查看官网

https://www.npmjs.com/package/react-native-snap-carousel

5. 小参数大布局（只要在Carousel中加上参数就可发挥作用）

5.1 默认

参数
<Carousel layout={'default'} />
结果

5.2 Stack

参数
<Carousel layout={'stack'} layoutCardOffset={`18`} />
结果

5.3 Tinder

参数
<Carousel layout={'tinder'} layoutCardOffset={`9`} />
结果

5.4 叮！

You should NOT use stack or tinder layouts if you have a large data set to display. In order to avoid rendering issues, the carousel will use a ScrollView component rather than a FlatList one for those layouts (see prop useScrollView). The tradeof is that you won't benefit from any of FlatList's advanced optimizations. See this issue for workarounds; or you may want to implement your own custom interpolation.

大概意思就是如果数据过多的情况下不要用stack或者tinder布局，因为他们是基于scrollView的，所以如果数据很多的话会增大系统开销。
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。