把门打开

在React Native中实现门开合动画，这是一种以左边缘为中心旋转的动画。它可以为您的应用程序添加一些交互性和趣味性。

import React, { useState } from "react";
import { StyleSheet, View, TouchableOpacity, Text } from "react-native";

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDoor = () => {
    setIsOpen(!isOpen);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.door} onPress={toggleDoor}>
        <Text style={styles.doorText}>{isOpen ? "关门" : "开门"}</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  door: {
    width: 200,
    height: 200,
    backgroundColor: "red",
    justifyContent: "center",
    alignItems: "center",
    transform: [{ rotate: isOpen ? "90deg" : "0deg" }],
  },
  doorText: {
    color: "white",
    fontSize: 20,
  },
});

export default App;

这个动画由三个主要部分组成：

1. TouchableOpacity：这是一个可以被点击的组件，当用户点击它时，它将调用toggleDoor函数。
2. View：这是一个包含门内容的组件。它被设置为transform: [{ rotate: isOpen ? "90deg" : "0deg" }]，这意味着当isOpen状态为true时，门将旋转90度，否则，门将保持关闭状态。
3. Text：这是一个显示“开门”或“关门”文本的组件。

当用户点击“开门”按钮时，toggleDoor函数将被调用，它将设置isOpen状态为true，这将导致门旋转90度。当用户点击“关门”按钮时，toggleDoor函数将被再次调用，它将设置isOpen状态为false，这将导致门关闭。