Animuj elementy listview po ich dodaniu/usunięciu ze źródła danych

Question

Czy ktoś może mi powiedzieć, jak to zrobić, np. animować wysokość od 0 po dodaniu i z powrotem do 0 po usunięciu?

Answer 1

Animacja gdy dodany jest proste, wystarczy użyć Animated w componentDidMount z listRow, na przykład:

componentDidMount =()=> { 
    Animated.timing(this.state._rowOpacity, { 
     toValue: 1, 
     duration: 250, 
    }).start() 
} 

Animacja komponentu przed zdejmowania jest znacznie trudniejsze w reagują-rodzimy. Powinieneś ustawić program obsługi dla ListView. Po zmianie źródła danych zmień dane, uruchom Animowane, aby ukryć usunięty wiersz i ustaw nowe źródło danych na ListView.

Answer 2

Tutaj można uzyskać pełną przykład pracy dla animacji krycia:

import React from 'react-native'; 

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

     this.state = { 
      opacity: new React.Animated.Value(0) 
     }; 
    } 

    componentDidMount() { 
     React.Animated.timing(this.state.opacity, { 
      toValue: 1, 
      duration: 250, 
     }).start(); 
    } 

    render() { 
     return (
      <React.Animated.View style={[styles.wrapper, {opacity: this.state.opacity}]}> 
       <React.Image source={{uri: 'http://placehold.it/150x150'}} style={styles.image}/> 
       <React.Text style={styles.text}> 
        Text 
       </React.Text> 
      </React.Animated.View> 
     ); 
    } 
} 

const styles = React.StyleSheet.create({ 
    wrapper: { 
     flex: 1, 
     flexDirection: 'row', 
     justifyContent: 'flex-start', 
     alignItems: 'center', 
    }, 
    image: { 
     height: 40, 
     width: 40, 
     marginRight: 16, 
     backgroundColor: '#C9D5E6' 
    }, 
    text: { 
     fontSize: 20 
    } 
}); 

Answer 3

na wypadek konieczności usuwania elementu z listy, oto jak to zrobić komponent ListRow:

class DynamicListRow extends Component { 
 
    // these values will need to be fixed either within the component or sent through props 
 
    _defaultHeightValue = 60; 
 
    _defaultTransition = 500; 
 
    state = { 
 
     _rowHeight : new Animated.Value(this._defaultHeightValue), 
 
     _rowOpacity : new Animated.Value(0) 
 
    }; 
 
    componentDidMount() { 
 
     Animated.timing(this.state._rowOpacity, { 
 
      toValue : 1, 
 
      duration : this._defaultTransition 
 
     }).start() 
 
    } 
 
    componentWillReceiveProps(nextProps) { 
 
     if (nextProps.remove) { 
 
      this.onRemoving(nextProps.onRemoving); 
 
     } else { 
 
// we need this for iOS because iOS does not reset list row style properties 
 
      this.resetHeight() 
 
     } 
 
    } 
 
    onRemoving(callback) { 
 
     Animated.timing(this.state._rowHeight, { 
 
      toValue : 0, 
 
      duration : this._defaultTransition 
 
     }).start(callback); 
 
    } 
 
    resetHeight() { 
 
     Animated.timing(this.state._rowHeight, { 
 
      toValue : this._defaultHeightValue, 
 
      duration : 0 
 
     }).start(); 
 
    } 
 
    render() { 
 
     return (
 
      <Animated.View 
 
       style={{height: this.state._rowHeight, opacity: this.state._rowOpacity}}> 
 
       {this.props.children} 
 
      </Animated.View> 
 
     ); 
 
    } 
 
}

opublikowałem kompletny samouczek na to pytanie w tym poście na blogu. I wyjaśnia krok po kroku, co musisz zrobić, aby osiągnąć zarówno dodawanie i usuwanie przedmiotu, jak i animowanie tego procesu. Dodanie jest całkiem proste, ale w przypadku usuwania wygląda na nieco bardziej skomplikowane. http://moduscreate.com/react-native-dynamic-animated-lists/