LayoutAnimation في React Native

من موسوعة حسوب

تحرِّك الواجهات لمواضعها الجديدة تلقائيًا عند تطبيق التخطيط التاّلي.

تعدّ الطّريقة المألوفة لاستخدام هذه الواجهة البرمجية هي استدعاؤها قبل تحديث خطّاف الحالة (state hook) في المكوّنات الوظيفيّة (functional components)، واستدعاء setState ضمن مكونات الصنف.

ويجب وضع الرّايات (flags) التّالية بواسطة UIManager لتعمل هذه الواجهة البرمجيّة على منصّة Android:

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

مثال

import React, { useState } from "react";
import { LayoutAnimation, Platform, StyleSheet, Text, TouchableOpacity, UIManager, View } from "react-native";
​
if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}
const App = () => {
  const [expanded, setExpanded] = useState(false);
​
  return (
    <View style={style.container}>
      <TouchableOpacity
        onPress={() => {
          LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
          setExpanded(!expanded);
        }}
      >
        <Text>Press me to {expanded ? "collapse" : "expand"}!</Text>
      </TouchableOpacity>
      {expanded && (
        <View style={style.tile}>
          <Text>I disappear sometimes!</Text>
        </View>
      )}
    </View>
  );
};
​
const style = StyleSheet.create({
  tile: {
    backgroundColor: "lightgrey",
    borderWidth: 0.5,
    borderColor: "#d6d7da"
  },
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden"
  }
});
​
export default App;

التوابع

‎configureNext()‎

static configureNext(config, onAnimationDidEnd?)

يجدوِل الحركة لتحدُث في التخطيط التّالي.

المعاملات

الاسم النوع مطلوب الوصف
config كائن (object) نعم انظر الوصف بالأسفل
onAnimationDidEnd دالة (function) لا تُستدعى عند انتهاء الحركة، مدعومة فقط على منصة IOS

المعامل config هو كائن مع المفاتيح الموضّحة في الأسفل، يعيد التابع ()create كائنًا موافقًا للكائن config، ويمكن تمرير جميع كائنات الضّبط المسبق Presets، مثل: الكائن config.

  • duration: المدّة الزّمنيّة بالميلي ثانية.
  • create: مكوّن config اختياريٌّ للتحريك في الواجهات الجديدة.
  • update: مكوّن (config) اختياريٌّ للواجهات المتحرّكة المحدَّثة.
  • delete: مكوّن (config) اختياريٌّ للواجهات المتحرّكة المحذوفة.

يتضمن المكوّن (config) الذي يمرّر إلى create، وupdate، وdelete المفاتيح التالية:

  • type: نوع الحركة animation type التي ستستخدم.
  • property: خاصيّة التّخطيط layout property (اختياريٌّ، لكنّه مطلوبٌ في create، وdelete).
  • springDamping: (عددٌ، اختياريٌّ، ويستخدم فقط مع type: Type.spring).
  • initialVelocity: (عددٌ، اختياريٌّ).
  • delay: (عددٌ، اختياريٌّ).
  • duration: (عددٌ، اختياريٌّ).

‎create()‎

static create(duration, type, creationProp)

هو تابعٌ مساعدٌ يُنشئ كائنًا يحوي الحقول (create, update, delete)، ليمرَّر للتابع ‏()‎configureNext، حيث المُعامل type هو نوع الحركة animation type، والمُعامل creationProp هو خاصيّة التخطيط layout property.

مثال الاستخدام

  • مثال لمكوِّن دالّة (Function Component)
import React, { useState } from "react";
import {
  View,
  Platform,
  UIManager,
  LayoutAnimation,
  StyleSheet,
  Button
} from "react-native";
​
if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}
​
const App = () => {
  const [boxPosition, setBoxPosition] = useState("left");
​
  const toggleBox = () => {
    LayoutAnimation.configureNext(
      LayoutAnimation.create(
        500,
        LayoutAnimation.Types.spring,
        LayoutAnimation.Properties.scaleXY
      )
    );
    setBoxPosition(boxPosition === "left" ? "right" : "left");
  };
​
  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button title="Toggle Layout" onPress={toggleBox} />
      </View>
      <View
        style={[styles.box, boxPosition === "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",
    height: 200,
    width: 200
  },
  buttonContainer: {
    alignSelf: "center"
  }
});
​
exportدون أن نعلم default App;
  • مثال لمكوِّن صنف (Class Component)
import React, { Component } from "react";
import {
  View,
  Platform,
  UIManager,
  LayoutAnimation,
  StyleSheet,
  Button
} from "react-native";
​
if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}
​
class App extends Component {
  state = {
    boxPosition: "left"
  };
​
  toggleBox = () => {
    LayoutAnimation.configureNext(
      LayoutAnimation.create(
        500,
        LayoutAnimation.Types.spring,
        LayoutAnimation.Properties.scaleXY
      )
    );
    this.setState({
      boxPosition: this.state.boxPosition === "left" ? "right" : "left"
    });
  };
​
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button title="Toggle Layout" onPress={this.toggleBox} />
        </View>
        <View
          style={[
            styles.box,
            this.state.boxPosition === "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",
    height: 200,
    width: 200
  },
  buttonContainer: {
    alignSelf: "center"
  }
});
​
export default App;

الخاصيّات

Types

تستخدم أنواع الحركات من القيم المتعدّدة (enumeration) في التّابع ()‎create، أو في المعامل config الذي يمرّر إلى create، أو update، أو delete من أجل التّابع ()configureNext، (يمكن أن يستخدم، مثلًا: LayoutAnimation.Types.easeIn)، وهذه الأنواع هي:

  • spring
  • linear
  • easeInEaseOut
  • easeIn
  • easeOut
  • keyboard

Properties

خاصيات التّخطيط من القيم المتعدّدة (enumeration) المستخدمة في الحركات، وتستخدم في التّابع ()create، أو في المعامل (config) الذي يمرّر إلى create، أو update، أو delete من أجل التّابع ()configureNext، (يمكن أن يستخدم مثلًا: LayoutAnimation.Properties.opacity)، وهذه الخاصيات هي:

  • opacity
  • scaleX
  • scaleY
  • scaleXY

Presets

وهي مجموعة من معاملات (أو مكونات config) حركةٍ معرّفةٍ مسبقًا، تمرّر للتّابع ‪.configureNext()

كائن الضبط المسبق القيمة
easeInEaseOut create (300, 'easeInEaseOut', 'opacity')‎
linear create (500, 'linear', 'opacity')‎
spring ‏‎{ duration: 700, create: { type: linear, property: opacity }, update: { type: spring, ‎‏‏springDamping: 0.4 }, delete: { type: linear, ‎property: opacity } }‎‎‏‪‫

‫‏()‎easeInEaseOut

يستدعي التّابع ()configureNext مع Presets.easeInEaseOut.

()liner

يستدعي التّابع ()configureNext مع Presets.liner.

()spring

يستدعي التّابع ()configureNext مع Presets.spring.

مثال الاستخدام

  • مثال لمكوِّن دالّة (Function Component)
import React, { useState } from "react";
import {
  View,
  Platform,
  UIManager,
  LayoutAnimation,
  StyleSheet,
  Button
} from "react-native";
​
if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}
​
const App = () => {
  const [firstBoxPosition, setFirstBoxPosition] = useState("left");
  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}>
      <View style={styles.buttonContainer}>
        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
      </View>
      <View
        style={[
          styles.box,
          firstBoxPosition === "left" ? null : styles.moveRight
        ]}
      />
      <View style={styles.buttonContainer}>
        <Button title="Linear" onPress={toggleSecondBox} />
      </View>
      <View
        style={[
          styles.box,
          secondBoxPosition === "left" ? null : styles.moveRight
        ]}
      />
      <View style={styles.buttonContainer}>
        <Button title="Spring" onPress={toggleThirdBox} />
      </View>
      <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"
  }
});
​
export default App;
  • مثال لمكوِّن صنف (Class Component)
import React, { Component } from "react";
import {
  View,
  Platform,
  UIManager,
  LayoutAnimation,
  StyleSheet,
  Button
} from "react-native";
​
if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}
​
class App extends Component {
  state = {
    firstBoxPosition: "left",
    secondBoxPosition: "left",
    thirdBoxPosition: "left"
  };
​
  toggleFirstBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    this.setState({
      firstBoxPosition:
        this.state.firstBoxPosition === "left" ? "right" : "left"
    });
  };
​
  toggleSecondBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
    this.setState({
      secondBoxPosition:
        this.state.secondBoxPosition === "left" ? "right" : "left"
    });
  };
​
  toggleThirdBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    this.setState({
      thirdBoxPosition:
        this.state.thirdBoxPosition === "left" ? "right" : "left"
    });
  };
​
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button title="EaseInEaseOut" onPress={this.toggleFirstBox} />
        </View>
        <View
          style={[
            styles.box,
            this.state.firstBoxPosition === "left" ? null : styles.moveRight
          ]}
        />
        <View style={styles.buttonContainer}>
          <Button title="Linear" onPress={this.toggleSecondBox} />
        </View>
        <View
          style={[
            styles.box,
            this.state.secondBoxPosition === "left" ? null : styles.moveRight
          ]}
        />
        <View style={styles.buttonContainer}>
          <Button title="Spring" onPress={this.toggleThirdBox} />
        </View>
        <View
          style={[
            styles.box,
            this.state.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"
  }
});
​
export default App;

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=ReactNative/layoutanimation&oldid=30309»