React Native移动应用中未显示动画

Question

bounty到期在6天内。该问题的答案有资格获得+ 100声望赏金。Tom希望引起更多关注对此问题：

我只是无法使它正常工作。我尝试了很多不同的组合，但没有显示。

我创建了一个React Native应用来测试动画。我有一个背景，当用户按下该背景时，我希望动画出现在背景上并进行动画处理。代码：

import * as React from 'react';

import { StyleSheet, Text, View,  TouchableOpacity, Image, ImageBackground, Animated, Easing, Platform
} from 'react-native';
import { frame1 } from '../app-master-test/assets/index';
import { frame2 } from '../app-master-test/assets/index';
import { frame3 } from '../app-master-test/assets/index';
import { frame4 } from '../app-master-test/assets/index';
import { frame5 } from '../app-master-test/assets/index';
import { frame6 } from '../app-master-test/assets/index';
import { frame7 } from '../app-master-test/assets/index';
import { frame8 } from '../app-master-test/assets/index';

import { background } from '../app-master-test/assets/index';


const Images= [
  { id: 1, source: frame1},
  { id: 2, source: frame2 },
  { id: 3, source: frame3 },
  { id: 4, source: frame4 },
  { id: 5, source: frame5 },
  { id: 6, source: frame6 },
  { id: 7, source: frame7 },
  { id: 8, source: frame8 },

]

const length = Images.length;

export default class Timer extends React.Component {
  constructor(props){
  super(props);

  this.state = {

    isOn: false,    

  }

  this.animations = new Animated.Value(0);
  this.opacity = [];
  Images.map((item, index) => {
    this.opacity.push(
      this.animations.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [0, 1, 0],
      }),
    );


  });

}

onItemMouseDown = () => {
  Animated.loop(
    Animated.timing(this.animations, {
      toValue: length - 1,
      duration: 2000 * length,
      easing: Easing.linear,
      useNativeDriver: true,
    }),
  ).start();
console.log(this.animations)
  this.setState({
    isOn:true,

  }, () => {
    console.log(this.state.isOn)

  })

}

onItemMouseUp = () => {
  this.setState({
    isOn:false

  }, () => {
    console.log(this.state.isOn)
  })
}

  render() {

    return(
      <ImageBackground source={background} style={styles.background}>


     <TouchableOpacity 
     onPressIn={this.onItemMouseDown}
     onPressOut={this.onItemMouseUp}

     >
     <Text style={styles.touchbutton}>Touch this</Text>

     </TouchableOpacity>

   {this.state.isOn === true ? 

      <View style={styles.container}>
      {/* <Image source={frame1}></Image> */} //I can render this image if this.state.isOn is true

          {Images.map((item, index) => { //but this does not show ANYTHING!
          const opacity = this.opacity[index];
          {/* console.log(item)
          console.log(index) */}
          return(
            <Animated.View
             key={item.id}
            style={[styles.anim, {animations: item, opacity}]}
            />

          )

        })}

      </View>
  : null }

       </ImageBackground>
     )

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: 'center',

  },
  background: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center",
    alignItems: 'center',
  },
  anim: {

    width: 100,
    height: 100,

    },
  touchbutton: {
    flex: 1,
    position: 'relative',
    marginTop: 300,
  },
  touchbuttontest: {
    flex:1,
    position: 'relative',
    marginTop: 200,
  }


});

如上所述，什么也没有出现。我不确定是否是这个位：

<Animated.View
      key={item.id}
      style={[styles.anim, {animations: item, opacity}]}
   />

特别是样式线。我不确定那是正确的。我不完全了解发生了什么。我不知道要输入什么，而不是animations: item。我认为这应该是某物的性质，但我不知道是什么。我已经看过了，没有任何建议有效：https://egghead.io/lessons/react-animate-styles-of-a-react-native-view-with-animated-timing

Answer 1

您的代码中没有问题，您可以给backgroundColor:"red" in anim检查它是否正常工作

您可以在此处查看演示：https://snack.expo.io/@nomi9995/animation

import * as React from "react";

import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  ImageBackground,
  Animated,
  Easing,
  Platform,
} from "react-native";
import { frame1 } from "../app-master-test/assets/index";
import { frame2 } from "../app-master-test/assets/index";
import { frame3 } from "../app-master-test/assets/index";
import { frame4 } from "../app-master-test/assets/index";
import { frame5 } from "../app-master-test/assets/index";
import { frame6 } from "../app-master-test/assets/index";
import { frame7 } from "../app-master-test/assets/index";
import { frame8 } from "../app-master-test/assets/index";

import { background } from "../app-master-test/assets/index";

const Images = [
  { id: 1, source: frame1 },
  { id: 2, source: frame2 },
  { id: 3, source: frame3 },
  { id: 4, source: frame4 },
  { id: 5, source: frame5 },
  { id: 6, source: frame6 },
  { id: 7, source: frame7 },
  { id: 8, source: frame8 },
];

const length = Images.length;

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isOn: false,
    };

    this.animations = new Animated.Value(0);
    this.opacity = [];
    Images.map((item, index) => {
      this.opacity.push(
        this.animations.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [0, 1, 0],
        })
      );
    });
  }

  onItemMouseDown = () => {
    Animated.loop(
      Animated.timing(this.animations, {
        toValue: length - 1,
        duration: 2000 * length,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    ).start();
    console.log(this.animations);
    this.setState(
      {
        isOn: true,
      },
      () => {
        console.log(this.state.isOn, "nominominomi");
      }
    );
  };

  onItemMouseUp = () => {
    this.setState(
      {
        isOn: false,
      },
      () => {
        console.log(this.state.isOn);
      }
    );
  };

  render() {
    return (
      <ImageBackground source={background} style={styles.background}>
        <TouchableOpacity
          onPressIn={this.onItemMouseDown}
          onPressOut={this.onItemMouseUp}
        >
          <Text style={styles.touchbutton}>Touch this</Text>
        </TouchableOpacity>

        {this.state.isOn === true ? (
          <View style={styles.container}>
            {/* <Image source={frame1}></Image>//I can render this image if
            this.state.isOn is true */}
            {Images.map((item, index) => {
              //but this does not show ANYTHING!
              const opacity = this.opacity[index];
              {
                /* console.log(item)
          console.log(index) */
              }
              return (
                <Animated.View
                  key={item.id}
                  style={[styles.anim, { animations: item, opacity }]}
                />
              );
            })}
          </View>
        ) : null}
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: 'center',

  },
  background: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center",
    alignItems: 'center',
  },
  anim: {
    width: 100,
    height: 100,
    backgroundColor:"red"
    },
  touchbutton: {
    flex: 1,
    position: 'relative',
    marginTop: 300,
  },
  touchbuttontest: {
    flex:1,
    position: 'relative',
    marginTop: 200,
  }
});