нужны пояснения по поводу LayoutAnimation

Question

Я пытался понять, как использовать LayoutAnimation, но документы мне не очень помогли. есть ли лучший источник? в любом случае вот этот код, который демонстрирует 3 различных типа анимации с layoutAnimation. Это приложение с 3 кнопками и 3 полями, которые по-разному перемещаются по экрану. Я не понимаю, что вызывает анимацию ящиков. Я не вижу вызова функции, который оживляет его. Я вижу только условные утверждения в атрибуте стиля. атрибут, кажется, ничего не знает о layoutAnimation. Тем не менее, он анимируется.

вот код

import React, { useState } from "react";
import {
  View,
  Platform,
  UIManager,
  LayoutAnimation,
  StyleSheet,
  Button
} from "react-native";

if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

export default function App() {
  const [firstBoxPosition, setFirstBoxPosition] = useState("right");
  const [secondBoxPosition, setSecondBoxPosition] = useState("left");
  const [thirdBoxPosition, setThirdBoxPosition] = useState("left");

  const toggleFirstBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setFirstBoxPosition(firstBoxPosition === "left" ? "right" : "left");
  };

  const toggleSecondBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
    setSecondBoxPosition(secondBoxPosition === "left" ? "right" : "left");
  };

  const toggleThirdBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    setThirdBoxPosition(thirdBoxPosition === "left" ? "right" : "left");
  };

  return (
    <View style={styles.container}>


      {/* button demonstrating easing animation*/}
      <View style={styles.buttonContainer}>
        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
      </View>
      
      {/* button demonstrating linear animation*/}
      <View style={styles.buttonContainer}>
        <Button title="Linear" onPress={toggleSecondBox} />
      </View>
      
      {/* button demonstrating spring animation*/}
      <View style={styles.buttonContainer}>
        <Button title="Spring" onPress={toggleThirdBox} />
      </View>


      {/*The three boxes demonstrating animation types*/}
      <View
        style={[
          styles.box,
          firstBoxPosition === "left" ? null : styles.moveRight
        ]}
      />


      <View
        style={[
          styles.box,
          secondBoxPosition === "left" ? null : styles.moveRight
        ]}
      />

      <View
        style={[
          styles.box,
          thirdBoxPosition === "left" ? null : styles.moveRight
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "flex-start",
    justifyContent: "center"
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    margin: 8,
    backgroundColor: "blue"
  },
  moveRight: {
    alignSelf: "flex-end"
  },
  buttonContainer: {
    alignSelf: "center"
  }
});

Answer 1

Идея (и основная проблема) с LayoutAnimation заключается в том, что она устанавливает анимацию для ВСЕХ последующих изменений макета, пока она не будет удалена. Он просто работает автоматически без дополнительных настроек.