Animieren listview-Elemente, wenn Sie Hinzugefügt/entfernt von datasource

Kann mir jemand eine Idee, wie dies gemacht werden kann, z.B. zum animieren der Höhe von 0, wenn Hinzugefügt wird, und 0, wenn Sie entfernt werden?

  • Da mein listitem ist eine Komponente, die kann ich auch anders formulieren die Frage um: Wie kann ich animieren, eine Komponente, kurz bevor es sich hebt?
  • Das ist eine gute Frage, und imo ist es noch nicht beantwortet. Gibt es eine Möglichkeit zu animieren, eine Komponente auf Unmount?
InformationsquelleAutor David | 2015-08-13
  1. 6

    Animation, wenn Hinzugefügt ist einfach, benutzen Sie einfach Animated im componentDidMount mit Ihrem listRow , zum Beispiel:

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

    Animieren, eine Komponente vor dem unmounten ist viel härter reagieren-native. Sie sollten einen handler für ListView. Wenn die Datenquelle geändert, diff der Daten, start, Animiert ausblenden entfernt Zeilen, und legen Sie neue Datenquelle für ListView.

    • Danke für die Erklärung. Ich bin mir nicht sicher, wie man die handler und diff - haben Sie einige Beispiel-code für mich zu bekommen begann?
    InformationsquelleAutor Fomahaut
  2. 6

    Hier können Sie voll funktionsfähiges Beispiel für Opazität animation:

    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
    }
});
    InformationsquelleAutor neciu
  3. 2

    In Fall müssen Sie für das entfernen eines Elements aus der Liste, hier ist, wie zu tun, der ListRow-Komponente:

    JS:

    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>
       );
   }
}

    ich gebucht habe, ein komplettes tutorial zu dieser Frage in diesem blog-post. Und es ist erklärt Schritt für Schritt, was Sie tun müssen, um zu erreichen, sowohl hinzufügen und entfernen eines Elements und animieren Sie diesen Prozess.
    Für das hinzufügen ist ziemlich straight forward, aber für das entfernen sieht aus wie es ist ein bisschen komplexer.
    http://moduscreate.com/react-native-dynamic-animated-lists/

    InformationsquelleAutor alexmodus
Schreibe einen Kommentar