React native 如何使用React Native将多个图片的帧显示为循环动画

我有几个动画帧。我想在循环中显示动画。我读过： 我已经尝试实施： 但是它们都没有涵盖动画的多个帧以及如何使用简单的代码在其中循环。我确信我需要做的是简单的，但是这些教程已经结束了

下面是我正在使用的一些代码： 就在渲染之前

Images: [
        { id: 1, src: './assets//frame1.png', title: 'foo', description: 'bar' },
        { id: 2, src: './assets//frame2.png', title: 'foo', description: 'bar' },
        { id: 3, src: './assets//frame3.png', title: 'foo', description: 'bar' },
        { id: 4, src: './assets//frame4.png', title: 'foo', description: 'bar' },
        { id: 5, src: './assets//frame32.png', title: 'foo', description: 'bar' },

      ]

render() {
const items = this.state.Images.map((item, key) =>
    <Image key={item.id}>{item.name}</Image>

...

<View>
  {items}
</View>

图像：[
{id:1，src:'./assets//frame1.png'，title:'foo'，description:'bar'}，
{id:2，src:'./assets//frame2.png'，标题：'foo'，说明：'bar'}，
{id:3，src:'./assets//frame3.png'，title:'foo'，description:'bar'}，
{id:4，src:'./assets//frame4.png'，title:'foo'，description:'bar'}，
{id:5，src:'./assets//frame32.png'，title:'foo'，description:'bar'}，
]
render（）{
const items=this.state.Images.map（（项，键）=>
{item.name}
...
{items}

这不起作用-对象作为子对象无效

我如何简单地在第一个位置显示该阵列的第一个图像，然后使其在每个图像中循环（创建动画）

谁能提供一个简单的代码块，演示如何在屏幕上以动画的形式循环/循环浏览资产文件夹中的几个.png文件

---

T

通过不透明度进行插值所需的所有操作

• 只需像修改图像数组一样修改数据数组，并在动画视图中显示图像

迭代图像数组并设置不透明度值

• 现在，this.opacity数组将包含每个项目的相应不透明度值

现在开始循环。（在这里我用2秒的时间从一个图像动画到另一个）

为渲染中的每个项目设置不透明度

Images: [
        { id: 1, src: './assets//frame1.png', title: 'foo', description: 'bar' },
        { id: 2, src: './assets//frame2.png', title: 'foo', description: 'bar' },
        { id: 3, src: './assets//frame3.png', title: 'foo', description: 'bar' },
        { id: 4, src: './assets//frame4.png', title: 'foo', description: 'bar' },
        { id: 5, src: './assets//frame32.png', title: 'foo', description: 'bar' },

      ]

render() {
const items = this.state.Images.map((item, key) =>
    <Image key={item.id}>{item.name}</Image>

...

<View>
  {items}
</View>

完整代码（示例）

import React，{Component}来自'React'；
从“react native”导入{View，StyleSheet，Animated，Easing}；
常量数据=[“红色”、“绿色”、“蓝色”、“紫色”、“粉色”、“红色”]；
常量长度=data.length；
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
this.animations=新的动画.Value（0）；
this.opacity=[]；
data.map（（项目、索引）=>{
这是推(
这个是.animations.interpolate({
输入范围：[索引-1，索引，索引+1]，
outputRange:[0,1,0]，
}),
);
});
}
componentDidMount（）{
动画循环(
动画。计时（此为动画{
toValue:length-1，
时长：2000*时长，
放松：放松，线性，
useNativeDriver：没错，
}),
).start（）；
}
render（）{
返回(
{data.map（（项目，索引）=>{
const opacity=this.opacity[index]；
返回(
);
})}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
},
项目：{
身高：200，
宽度：200，
位置：'绝对'，
},
});

我希望它能帮助你

Animated.loop(
  Animated.timing(this.animations, {
    toValue: length - 1,
    duration: 2000 * length,
    easing: Easing.linear,
    useNativeDriver: true,
  }),
).start();

const opacity = this.opacity[index];

import React, {Component} from 'react';
import {View, StyleSheet, Animated, Easing} from 'react-native';

const data = ['red', 'green', 'blue', 'violet', 'pink', 'red'];

const length = data.length;

export default class App extends Component {
  constructor() {
    super();
    this.animations = new Animated.Value(0);
    this.opacity = [];
    data.map((item, index) => {
      this.opacity.push(
        this.animations.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [0, 1, 0],
        }),
      );
    });
  }

  componentDidMount() {
    Animated.loop(
      Animated.timing(this.animations, {
        toValue: length - 1,
        duration: 2000 * length,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
    ).start();
  }

  render() {
    return (
      <View style={styles.container}>
        {data.map((item, index) => {
          const opacity = this.opacity[index];
          return (
            <Animated.View
              style={[styles.item, {backgroundColor: item, opacity}]}
            />
          );
        })}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  item: {
    height: 200,
    width: 200,
    position: 'absolute',
  },
});