再レンダリング特定の小道具が

Question

は、私がこのコンポーネント持って変更された場合、全コンポーネント：私はprops.itemsのアップデートを入手するたびに

<Animatable.Text animation='pulse' style={styles.toggle}>Items: {props.items}</Animatable.Text> 

は、コンポーネントの再描画の変化、価値を、しかし、アニメーションは」doesnの再出現する。

アニメーションを再表示させるにはどうすればよいですか？小道具を再び走らせますか？基本的にコンポーネントを完全に再レンダリングして、アニメーションの小道具をリロードしますか？

Note that the animation only runs on load, not state change

全コンポーネント：

import React, { Component } from 'react' 
import { View , TextInput, Button, Alert, StyleSheet } from 'react- 
native' 
import * as Animatable from 'react-native-animatable' 

export default class Adder extends Component { 
constructor(props) { 
    super(props) 
    this.state = { 
     text: '', 
     items: this.props.items 
    } 
} 

render() { 
    const { add, clear, items } = this.props 
return (
    <View style={{paddingTop: 50}}> 
     <TextInput placeholder='Buy...' autoCorrect={false} value={this.state.text} onChangeText={(text) => this.setState({text})} style={{ backgroundColor: '#ededed', height: 60, textAlign: 'center', marginBottom: 10 }} /> 
     <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>  
      <Button 
      title='Add Item' 
      onPress={() => { 
      this.state.text != '' ? add(this.state.text) : Alert.alert('Enter Groceries') 
      this.setState({text: ''}) 
      }} 
      /> 
     <Animatable.Text animation='pulse' style={styles.toggle}>Items: {this.state.items}</Animatable.Text> 
     <Button title='Mark All' onPress={() => clear()} /> 
     </View> 
    </View> 
) 
} 
} 
const styles = StyleSheet.create({ 
toggle: { 
    width: 100, 
    backgroundColor: '#333', 
    borderRadius: 3, 
    padding: 5, 
    fontSize: 14, 
    alignSelf: 'center', 
    textAlign: 'center', 
    color: 'rgba(255, 255, 255, 1)', 
    } 
}) 

Answer 1

状態変化は、おそらく命令的にアニメーションを呼び出したいときアニメーションはアニメーションが再表示させないので。これを行う1つの方法は、Animatableテキストのrefを使用してcomponentWillUpdateで呼び出すことです。したがって、次のようなもの：

// this gets triggered when you get a new state 
componentWillUpdate() { 
    // pulsate for 800 ms 
    this.animatedText.pulse(800); 
} 


//.. render method 
<Animatable.Text 
    animation='pulse' style={styles.toggle} 
    ref={(text) => { this.animatedText = text; }}> 
     Items: {this.state.items} 
</Animatable.Text>