循环多个图像以在react native中创建动画

cld4siwp 于 2023-04-12 发布在 React

关注(0)|答案(1)|浏览(178)

我已经尝试寻找多个教程相同的，但我找不到相同的。
我在资产中有多个图像，如：

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

这可以让我渲染所有的图像，但是，我想在图像上循环，并渲染他们1由1，使它看起来像一个动画。谁可以帮助相同的。
谢谢
编辑：我想在按钮所在的地方循环图像，我可以用条件渲染来处理。但是我想让它循环几秒钟，然后重新显示按钮。
这是我的：

{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>
        }

react-native

来源：https://stackoverflow.com/questions/75953700/loop-through-multiple-images-to-create-an-animation-in-react-native

1条答案

按热度按时间

gr8qqesn1#

这很简单，你应该能够自己实现它。尽管如此，我还是要提供一个基于（https://github.com/chagasaway/react-native-fading-slides）的示例。
Example：

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

赞(0）回复(0）举报 2023-04-12

我来回答

循环多个图像以在react native中创建动画

1条答案

相关问题

热门标签

最新问答