在react native中循环遍历多个图像来创建动画

Question

我已经尝试过寻找相同的多个教程，但我找不到相同的

我在资产中有多个图像，如:

const animImages = [
require('..//../img/ic_1.png'),
require('..//../img/ic_2.png'),
require('..//../img/ic_3.png'),
require('..//../img/ic_4.png'),
require('..//../img/ic_5.png'),
require('..//../img/ic_6.png'),
];
export default animImages;

我想做的是基于一个按钮按下，我想循环这些图像一个接一个，并显示在一个视图中。我创建了一个变量，并尝试有条件地渲染基于相同的组件。下面是代码片段:

<>
{animImages.map(img => <Image source={img} />)}
</> 

这让我可以渲染所有的图像，但是，我想要在图像上循环并逐个渲染它们，这样它看起来就像一个动画。有人能帮我吗?

感谢编辑:我想在按钮所在的位置循环图像，我可以使用条件渲染来处理相同的内容。但是我想让它循环几秒钟，然后重新显示按钮。

我有:

{componentProps.showAnimation ? 
<View style={styles.elevatedView}>
<TouchableOpacity
onPress={() => {
console.log("button pressed");
// stop the image loop 
}} 
>
{The loop for images comes here }
</TouchableOpacity>
</View>
: 
<View style={styles.elevatedView}>
<IconsRender
icon={acomponentProps.icons.icon}
/>
</View>
}

Answer 1

你真的可以使用简单的react native动画来实现。例如:

import React, { useState, useEffect, useRef } from 'react';
import { Animated, Image, StyleSheet, View , Text} from 'react-native';
const ANIMATION_DURATION = 500; // you can add your own animation time in ms
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
image: {
width: 50,
height: 20,
},
});
const IMAGES = [
// add your images here 
];
const micAnimation = () => {
const animation = useRef(new Animated.Value(0)).current;
const [imageIndex, setImageIndex] = useState(0);
useEffect(() => {
Animated.loop(
Animated.timing(animation, {
toValue: 1,
duration: ANIMATION_DURATION,
useNativeDriver: true,
}),
).start();
}, []);
animation.addListener(({ value }) => {
const newIndex = Math.floor(value * IMAGES.length);
setImageIndex(newIndex);
});
const imageSource = IMAGES[imageIndex];
return (
<View style={styles.container}>
<Animated.Image
style={[styles.image, { opacity: animation }]}
source={imageSource}
/>
</View>
);
};
export default micAnimation;

Answer 2

这很简单，您应该能够自己实现它。然而，我将提供一个基于(https://github.com/chagasaway/react-native-fading-slides)

的示例的例子:

import React from 'react';
import { StyleSheet, View, Dimensions, Button } from 'react-native';
import FadingSlides from './FadeImage/fadeimage';
const { width, height } = Dimensions.get('window');
const slides = [
{
image: require('./assets/snack-icon.png'),
imageWidth: width - width * 0.3,
imageHeight: width - width * 0.3,
title: 'JavaScript',
subtitle: 'The definitive language',
titleColor: '#fff',
subtitleColor: 'yellow',
},
{
image: require('./assets/snack-icon.png'),
imageWidth: width - width * 0.3,
imageHeight: width - width * 0.3,
title: 'ReactJS',
subtitle: 'JavaScript coolest library',
titleColor: '#fff',
subtitleColor: 'cyan',
},
];
export default App = () => {
const [startAnimation, setStartAnimation] = React.useState(true);
return (
<View style={styles.container}>
<FadingSlides
slides={slides}
fadeDuration={1200}
stillDuration={2000}
startAnimation={startAnimation}
height={height}
/>
<Button
title="Toggle animation"
onPress={() => {
setStartAnimation(() => {
return !startAnimation;
});
}}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ff0000',
},
});