Question

我想在reactNative中为该图像轮播设置动画，但不知道如何开始。阅读有关动画的文档，但仍然很困惑，不知道如何将其合并。我尝试过这种方法，但始终遇到严重的错误。救命！

import React from 'react';
import {StyleSheet, View, ScrollView, Dimensions, Image, Animated} from 'react-native'

const DEVICE_WIDTH = Dimensions.get('window').width;

class BackgroundCarousel extends React.Component {
    scrollRef = React.createRef();
    constructor(props) {
        super(props);

        this.state = {
            selectedIndex: 0,
            opacity: new Animated.Value(0)
        };
    }

    componentDidMount = () => {
        Animated.timing(this.state.opacity , {
            toValue: 1,
            duration: 500,
            useNativeDriver: true,
        }).start();
        setInterval(() => {
            this.setState(
                prev => ({ selectedIndex: prev.selectedIndex === 
                    this.props.images.length - 1 ? 0 : prev.selectedIndex +1 }),
            () => {
                this.scrollRef.current.scrollTo({
                    animated: true,
                    y: 0,
                    x: DEVICE_WIDTH * this.state.selectedIndex
                });
            }
            );
        }, 6000);

    };



    componentWillUnmount() {
        clearInterval(this.setState);
    }

    render() {
        const {images} = this.props
        const {selectedIndex} = this.state
        return (
            <Animated.Image
                onLoad={this.onLoad}
                {...this.props}
                style={[
                    {
                    opacity: this.state.opacity,
                    },
                    this.props.style,
                ]}
            />
            <View style= {{height: "100%", width: "100%"}}>
                {this.props.children}
                <ScrollView 

                horizontal 
                pagingEnabled
                scrollEnabled={false}
                ref={this.scrollRef}
                >
                    {images.map(image => (
                        <Image
                            key={image}
                            source={image}
                            style={styles.backgroundImage}
                        />
                    ))}
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create ({
    backgroundImage: {
        height: '100%',
        width: DEVICE_WIDTH,
    }

});

导出默认的BackgroundCarousel；任何帮助，将不胜感激。不知道我要去哪里错了。基本上是尝试在背景轮播在图像之间变化时添加淡入淡出效果。

Answer 1

我已经修复了您的代码，并删除了所有错误，将其复制粘贴到https://snack.expo.io/中，并给其一些加载时间。

注意：我已经删除了用于网站演示的this.props.images，请在您的实际项目中进行更改。

工作中淡入淡出的回声：https://snack.expo.io/@rajrohityadav/fade-carosal 但是我还没有使用React Animation来实现这一点。

import React from 'react';
import {StyleSheet, View, ScrollView, Dimensions, Image, Animated} from 'react-native'

const DEVICE_WIDTH = Dimensions.get('window').width;

export default class BackgroundCarousel extends React.Component {
    scrollRef = React.createRef();
    constructor(props) {
        super(props);

        this.state = {
            selectedIndex: 0,
            opacity: new Animated.Value(0)
        };
    }

    componentDidMount = () => {
        Animated.timing(this.state.opacity , {
            toValue: 1,
            duration: 500,
            useNativeDriver: true,
        }).start();
        setInterval(() => {
            this.setState(
                prev => ({ selectedIndex: prev.selectedIndex === 
                    3 - 1 ? 0 : prev.selectedIndex +1 }),
            () => {
                this.scrollRef.current.scrollTo({
                    animated: true,
                    y: 0,
                    x: DEVICE_WIDTH * this.state.selectedIndex
                });
            }
            );
        }, 6000);

    };



    componentWillUnmount() {
        clearInterval(this.setState);
    }

    render() {
        const images =[
    'https://image.shutterstock.com/image-vector/dragon-scream-vector-illustration-tshirt-260nw-1410107855.jpg','https://image.shutterstock.com/image-vector/dragon-head-vector-illustration-mascot-600w-1201914655.jpg',
    'https://i.pinimg.com/474x/b7/1a/bb/b71abb6dd7678bbd14a1f56be5291747--dragon-illustration-samurai-tattoo.jpg']//this.props
        const {selectedIndex} = this.state
        return (
          <>
            <Animated.Image
                onLoad={this.onLoad}
                {...this.props}
                style={[
                    {
                    opacity: this.state.opacity,
                    },
                    this.props.style,
                ]}
            />
            <View style= {{height: "100%", width: "100%"}}>
                {this.props.children}
                <ScrollView 

                horizontal 
                pagingEnabled
                scrollEnabled={false}
                ref={this.scrollRef}
                >
                    {images.map(image => (
                        <Image
                            key={image}
                            source={image}
                            style={styles.backgroundImage}
                        />
                    ))}
                </ScrollView>
            </View>
            </>
        )
    }
}

const styles = StyleSheet.create ({
    backgroundImage: {
        height: '100%',
        width: DEVICE_WIDTH,
    }

});

尝试给我的图像轮播React-Native提供淡入淡出的动画

1 个答案: