Wie animieren Sie in React-Native die Größe einer Ansicht, wenn Sie die Größe ihres Inhalts nicht kennen?

Angenommen, die Inhaltshöhe der Ansicht kann zwischen 0 und 400 pt liegen, und der Inhalt kann dynamisch wachsen und schrumpfen, und Sie möchten alle Änderungen an der Höhe animieren.

Grundsätzlich möchte ich das Verhalten von LayoutAnimation reproduzieren ohne Verwendung von LayoutAnimation aber mit Animated.

Ich denke, was mir entgeht, ist, dass ich nicht weiß, wie ich auf eine Zielhöhe hin animieren soll, da ich die Höhe des Inhalts nicht kenne.

ich benutze LayoutAnimation Fügen Sie dazu kurz vor der Zustandsänderung, die die Änderung der Höhe Ihrer Komponente bewirkt, Folgendes hinzu:

LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);


Sie können verschiedene Voreinstellungen verwenden:

• Frühling
• EaseInEaseOut

• linear

  Hier können Sie mehr darüber lesen https://facebook.github.io/react-native/docs/layoutanimation.html

Hallo zusammen, hoffe es ist noch nicht zu spät…

für alle, die sich mit React Native Animation auf Sichthöhe beschäftigen.
Ich weiß, dass es sehr nervig ist, denn:

✖️ React Native Animation scheint keine Unterstützung von Layoutstilen (z. B. Breite und Höhe)
✖️ LayoutAnimation sieht kompliziert aus zu untersuchen
✖️ Möchten Sie eine offizielle Methode zum Animieren verwenden, anstatt ein Paket eines Drittanbieters zu installieren
✖️ Manchmal kann der Inhalt groß sein, um Ihre Ansichtsstile zu beeinträchtigen

Also hier ist meine Lösung für dich (Klassenkomponenten Weg):

Setzen Sie zuerst den animierten Wert in state:

state = { height: new Animated.Value(0) };

Stellen Sie als Nächstes Ihre animierte Ansicht ein max height mit Animationsinterpolation:

const maxHeight = this.state.height.interpolate({ 
  inputRange: [0, 1], 
  outputRange: [0, 2000]  // <-- any value larger than your content's height
});
return (<Animated.View style={[styles.box, { maxHeight: maxHeight }]} />); 
// any other fixed styles in styles.box

Setzen Sie danach die Animation in die function du hast angerufen,
oder componentDidMount wenn Sie möchten, dass es angezeigt wird, sobald es gerendert wurde:

// or in any function that users interact
componentDidMount() {
  Animated.timing(this.state.formHeight, {
    toValue: 1,
    duration: 500,           // <-- animation duration
    easing: Easing.linear,   // <-- or any easing function
    useNativeDriver: false   // <-- need to set false to prevent yellow box warning
  }).start();
}

Beachten Sie, dass nicht einstellen useNativeDriver zu true da es von Layoutstilen nicht unterstützt wird.

Probe

Nachfolgend finden Sie ein Beispiel, mit dem Sie interagieren können.
fühlen sich frei Kopieren und Einfügen zu deinem React Native Projekt zum Ausprobieren:

import React, { PureComponent } from 'react';
import { Animated, Button, Easing, View, Text, StyleSheet } from 'react-native';

class AnimateBox extends PureComponent {
  state = { opacity: new Animated.Value(0), height: new Animated.Value(0) };

  showContent = () => {
    const { opacity, height } = this.state;

    Animated.timing(height, {
      toValue: 1,
      duration: 500,
      easing: Easing.linear,
      useNativeDriver: false  // <-- neccessary
    }).start(() => {
      Animated.timing(opacity, {
        toValue: 1,
        duration: 500,
        easing: Easing.linear,
        useNativeDriver: false  // <-- neccessary
      }).start();
    });
  };

  render() {
    const { opacity, height } = this.state;
    const maxHeight = height.interpolate({ 
      inputRange: [0, 1], 
      outputRange: [0, 1000]  // <-- value that larger than your content's height
    });

    return (
      <View style={styles.box}>
        <Animated.View style={{ opacity: opacity, maxHeight: maxHeight }}>
          <Text style={styles.content}>
            Lorem Ipsum is simply a dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting,
            remaining essentially unchanged. It was popularised in the 1960s with the release of
            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </Text>
        </Animated.View>
        <View style={styles.spacing}>
          <Button title="Show content" onPress={this.showContent} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    backgroundColor: '#fff',
    marginHorizontal: 15,
    paddingHorizontal: 15
  },
  spacing: {
    paddingVertical: 10
  },
  content: {
    fontSize: 16,
    lineHeight: 30,
    color: '#555'
  }
});


export default AnimateBox;

Viel Spaß beim Codieren 🙂

Weitere Erläuterungen (bearbeitet am 03.02.2021)

Wie in der React Native-Dokumentation erwähnt:
https://reactnative.dev/docs/animations#caveats

Nicht alles, was Sie mit Animated tun können, wird derzeit vom nativen Treiber unterstützt. Die Haupteinschränkung besteht darin, dass Sie nur Nicht-Layout-Eigenschaften animieren können: Dinge wie Transformation und Deckkraft funktionieren, aber Flexbox- und Positionseigenschaften nicht.

Deaktivieren useNativeDriver kann andere Stile als animieren opacity und transformaber erhöhen Sie tatsächlich die Arbeitslast auf dem JS-Thread, da der JS-Thread die UI für jeden Frame berechnen muss.

Und hier im Blog von React Native 0.62:
https://reactnative.dev/blog/2020/03/26/version-0.62#deprecations

Das Festlegen von useNativeDriver ist jetzt erforderlich, um das Umschalten der Standardeinstellung in Zukunft zu unterstützen.

Sie müssen die Einstellung vornehmen useNativeDriver in Animationsoptionen ein React native v0.62 oder höher, um Warnungen zu vermeiden.

Sie müssen eine Art Größenskalierung hinzufügen, wahrscheinlich mit Prozentsätzen, um den besten Effekt zu erzielen.

Das erste, was Sie zuerst verwenden müssten Animated.View Anstatt von View.

Als nächstes müssten Sie eine Transformation auf den Stil der Ansicht anwenden, sagen wir, es sieht so aus wie unten. Dies ist der Teil, der die Bewegung aktualisiert, ändert und erzeugt.

        <Animated.View style={[ styles.someStyleYouMade,
          {
            transform: [
              // scaleX, scaleY, scale, theres plenty more options you can find online for this.
              {  scaleX: ViewScaleValue } // this would be the result of the animation code below and is just a number.
            ]
          } 
        ]}
        >

Dieser nächste Teil ist im Grunde ein animiertes API-Beispiel, Sie würden so etwas schreiben (individuell nach Ihren Wünschen) und wenn dieses Skript aufgerufen wird, wird es auf die von Ihnen angegebene Weise animiert.

  Animated.timing(                    // Animate over time
    this.state.ViewScale,             // The animated value to drive, this would be a new Animated.Value(0) object.
    {
      toValue: 100,                   // Animate the value
      duration: 5000,                 // Make it take a while
    }
  ).start();

Schließlich möchten Sie wahrscheinlich eine Interpolation auf den Wert anwenden, damit er so individuell wie möglich aussieht.

(Das geht in deine render() Funktion aber vor der return(). das ViewScaleValue wird in die gehen Animated.View verwandeln)

const ViewScaleValue = this.state.ViewScale.interpolate({
  inputRange: [0, 25, 50, 75, 100],
  outputRange: [0, .5, 0.75, 0.9, 1]
});

all dieser Code würde machen ViewScaleValueeine einfache Zahl, animieren Sie von 0-100, gehen Sie schnell und dann langsam (aufgrund der Interpolation) und wenden Sie jede Iteration der Animation auf die an Animated.View verwandeln.

Lesen Sie die animierte API daneben, um ein gutes Verständnis dafür zu bekommen.

Die Methode, die ich gewählt habe, besteht darin, Layout-Durchläufe aufzuwenden, um die Höhe der “abgeschnittenen” Komponente und die Höhe der “volle Größe”-Komponente zu erhalten (Sie brauchen einen Weg, damit die abgeschnittene Höhe deterministisch ist, normalerweise indem Sie wissen, wie man a “Zeile” des Inhalts). Bevor Sie diese Werte haben, rendern Sie diese im Wesentlichen als zwei separate Ansichten, die ausgeblendet sind:

hidden: {
  position: 'absolute',
  left: 0,
  top: 0,
  opacity: 0,
},

Verwenden Sie onLayout, um ihre Höhen zu erfassen:

const onLayoutTruncated = ({nativeEvent}: LayoutChangeEvent) => {
  if (!doneProcessing) {
    truncatedHeight = nativeEvent.layout.height;
    checkIfDoneProcessingLayout();
  }
};

const onLayoutFull = ({nativeEvent}: LayoutChangeEvent) => {
  if (!doneProcessing) {
    fullHeight = nativeEvent.layout.height;
    checkIfDoneProcessingLayout();
  }
};

checkIfDoneProcessingLayout() werde prüfen ob beides truncatedHeight und fullHeight gesetzt sind, und nehmen Sie eine Zustandsänderung vor, wenn beide gesetzt sind (doneProcessing = true).

Von dort aus sollten Sie die abgeschnittene Ansicht einblenden und zwischen beiden Höhenwerten mit an animieren können Animated.Value und Interpolation:

const expandingHeight = animatedValue.interpolate({
  inputRange: [0, 1],
  outputRange: [truncatedHeight, fullHeight],
});

Lösen Sie die Erweiterungs-/Reduzierungsanimation beim Klicken mit aus Animated.timing

Animated.timing(animatedValue, {toValue: isExpanded ? 0 : 1, easing: SOME_EASING_FUNCTION, duration: SOME_DURATION}).start();

Ich verwende eine eigene Komponente mit @react-spring/native

etwas wie das

import React from 'react';
import {View, ViewProps} from 'react-native';

interface GetDimensionsOfThisContainerProps extends ViewProps {
  children: React.ReactChild[];
  onDimensions: ({width, height}: {width: Number; height: Number}) => void;
}

export const GetDimensionsOfThisContainer: React.FC<
  GetDimensionsOfThisContainerProps
> = ({children, onDimensions, ...props}: GetDimensionsOfThisContainerProps) => {
  return (
    <View
      onLayout={event =>
        onDimensions({
          width: Math.round(event.nativeEvent.layout.width),
          height: Math.round(event.nativeEvent.layout.height),
        })
      }
      style={{position: 'absolute', width: '100%'}}
      {...props}>
      {children}
    </View>
  );
};

      <GetDimensionsOfThisContainer
        onDimensions={({height: _height}) => {
          if (dynamicHeight !== _height) setDynamicHeight(_height);
        }}>
       {children}
      </GetDimensionsOfThisContainer>

Quelle: https://gist.github.com/sturmenta/af790331f6bd27322ecd73ee723c8c60

Basierend auf der Lösung von @Wing Choi möchte ich meine verbesserte Lösung teilen. Das sollte Plug&Play funktionieren.

• Anstatt eine maxHeight zu verwenden (nicht so schön für Animationen), habe ich das onLayout-Event verwendet, um immer die genaue Höhe zu haben. (Wird bei allen inneren und äußeren Änderungen des Layers ausgelöst)
• Anstatt die Ebene einfach mit einer Schaltfläche zu öffnen, habe ich eine Eigenschaft “open” (bool) hinzugefügt, um die Ebene von einer übergeordneten Komponente aus zu steuern.

import React, { PureComponent } from 'react';
import { Animated, Easing, View } from 'react-native';
import PropTypes from "prop-types";

class AnimateBox extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      init: false,
      opacity: (this.props.open) ? 1 : 0,
      height: 1000
    };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.state.init && prevState.open !== this.props.open) {
      this.showContent();
    }
  }

  adjustHeight(layout) {
    const height = Math.round(layout.height);

    this.setState({
      init: true,
      opacity: new Animated.Value((this.props.open) ? 1 : 0),
      height: new Animated.Value((this.props.open) ? height : 0),
      interpol: {
        inputRange: [0, 1],
        outputRange: [0, height]
      }
    });
  }

  showContent = () => {
    const { opacity, height } = this.state;

    Animated.timing(height, {
      toValue: (this.props.open) ? 1 : 0,
      duration: 400,
      easing: Easing.out(Easing.ease),
      useNativeDriver: false
    }).start(() => {
      Animated.timing(opacity, {
        toValue: (this.props.open) ? 1 : 0,
        duration: 300,
        easing: Easing.linear,
        useNativeDriver: false
      }).start();
    });
  };

  render() {
    const { opacity, height, interpol } = this.state;
    let animHeight = height;
    if (this.state.init) {
      animHeight = height.interpolate(interpol);
    }
    return (
      <Animated.View style={{ position: 'relative', opacity: opacity, height: animHeight, overflow: 'hidden' }}>
        <View style={{position: 'absolute', top: 0, left: 0, right: 0}}
              onLayout={(event) => { this.adjustHeight(event.nativeEvent.layout)}} >
          {this.props.children}
        </View>
      </Animated.View>);
  }
}

AnimateBox.propTypes = {
  open: PropTypes.bool
};

AnimateBox.defaultProps = {
  open: false
}

export default AnimateBox;