React native如何使文本和图像具有动画效果

Question

大家好，我只想动画文字和图像。我写的这段代码是动画，在beginnig.When我更新状态，动画消失了，只是改变了图像和文本。我怎么才能修复它呢。

//the package I installed from npm
import * as Animatable from 'react-native-animatable';

//the images array changes by state
var arr=[{image:require('./assets/img1.png')},{image:require('./assets/img2.png')},{image:require('./assets/img3.png')}];

//The initial state
state = { 
  uri: require('./assets/img1.png'),
  message:"-",
  img_rank:0
};

//In onpress method of TocuhableOpacity
<TouchableOpacity
     onPress={() => {

const randomIndex = Math.floor(Math.random() * 3);

//state of message
this.setState({ message: "Act1" });

//state of image rank from the array
this.setState({ img_rank: randomIndex })
    ...

显示文本和图像

//it's showing the image with animation at the beginning
<Animatable.Image source={arr[this.state.img_rank].image}  animation="zoomInUp">      
</Animatable.Image>

//the text but it's not animating

<Animatable.Text   animation="zoomInUp">
   <Text>{this.state.message} </Text>
</Animatable.Text>

谢谢。

Answer 1

首先，将动画组件的ref放入类中的一个变量中，如animatedImageRef.

<Animatable.Image 
   ref={r => this.animatedImageRef = r}
   source={arr[this.state.img_rank].image}  
   animation={this.state.img_rank ? 'zoomInUp' : undefined}>      
</Animatable.Image>

然后，在您的onPress函数中，使用此引用再次为您的组件设置动画。

this.animatedImageRef.startAnimation(500, 0, () => { })