Javascript 尝试为我的图像旋转木马提供淡入淡出动画，反应为本地

我想在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,
    }

});

从“React”导入React；
从“react native”导入{样式表、视图、滚动视图、维度、图像、动画}
const DEVICE_WIDTH=维度.get（'window'）.WIDTH；
类BackgroundCarousel扩展React.Component{
scrollRef=React.createRef（）；
建造师（道具）{
超级（道具）；
此.state={
已选择索引：0，
不透明度：新的动画。值（0）
};
}
componentDidMount=（）=>{
动画。计时（this.state.opacity{
toValue:1，
持续时间：500，
useNativeDriver：没错，
}).start（）；
设置间隔（（）=>{
这是我的国家(
prev=>（{selectedIndex:prev.selectedIndex==
this.props.images.length-1？0:prev.selectedIndex+1}），
() => {
this.scrollRef.current.scrollTo({
是的，
y:0，
x:DEVICE\u WIDTH*this.state.selectedIndex
});
}
);
}, 6000);
};
组件将卸载（）{
clearInterval（此.setState）；
}
render（）{
const{images}=this.props
const{selectedIndex}=this.state
返回(
{this.props.children}
{images.map（image=>(
))}
)
}
}
const styles=StyleSheet.create({
背景图片：{
高度：“100%”，
宽度：设备宽度，
}
});

导出默认背景转盘；

---

任何帮助都将不胜感激。不知道我错在哪里。基本上，当我的背景旋转木马从一幅图像切换到另一幅图像时，我会尝试添加淡入淡出效果。

我已经修复了您的代码并删除了所有错误，复制粘贴它并给它一些加载时间

注意：我已经删除了这个网站演示的.props.images，请在真实项目中更改

工作餐： 但我并没有使用React动画实现这一点

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”导入React；
从“react native”导入{样式表、视图、滚动视图、维度、图像、动画}
const DEVICE_WIDTH=维度.get（'window'）.WIDTH；
导出默认类BackgroundCarousel扩展React.Component{
scrollRef=React.createRef（）；
建造师（道具）{
超级（道具）；
此.state={
已选择索引：0，
不透明度：新的动画。值（0）
};
}
componentDidMount=（）=>{
动画。计时（this.state.opacity{
toValue:1，
持续时间：500，
useNativeDriver：没错，
}).start（）；
设置间隔（（）=>{
这是我的国家(
prev=>（{selectedIndex:prev.selectedIndex==
3-1-0:prev.selectedIndex+1}），
() => {
this.scrollRef.current.scrollTo({
是的，
y:0，
x:DEVICE\u WIDTH*this.state.selectedIndex
});
}
);
}, 6000);
};
组件将卸载（）{
clearInterval（此.setState）；
}
render（）{
常量图像=[
'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
返回(
{this.props.children}
{images.map（image=>(
))}
)
}
}
const styles=StyleSheet.create({
背景图片：{
高度：“100%”，
宽度：设备宽度，
}
});

这是一个很大的帮助，只有一件事。我的背景旋转木马正在工作，但我想添加淡入淡出的动画。就像它从一张图片淡入下一张图片，而不是从一张图片滑入下一张图片。如何做到这一点？提前谢谢Raj。也尝试过使用你的代码，说标签不能包含子项是一个错误。标记不能包含子项，表示您正在尝试。但是图像标签只支持。正在使用淡入淡出幻灯片，您希望淡入淡出还是淡出淡出？另外，如果你是双向衰落，那么为什么你需要滑动？图像将在加载时隐藏，用户无法看到幻灯片动画。请解释更多或分享一个工作的例子，gif，视频或其他东西。我这里有一个工作的淡入淡出卡鲁萨快餐，这不是使用动画。