动态将组件推入和推出屏幕的React Native代码

在React Native中，可以通过使用Animated库来实现动态将组件推入和推出屏幕的效果。以下是一个简单的示例代码：

import React, { useState, useEffect } from "react";
import { Animated, View, Button } from "react-native";

const SlideInOutComponent = () => {
  const [isVisible, setIsVisible] = useState(false);
  const slideAnim = useState(new Animated.Value(0))[0];

  useEffect(() => {
    if (isVisible) {
      Animated.timing(slideAnim, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
      }).start();
    } else {
      Animated.timing(slideAnim, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true,
      }).start();
    }
  }, [isVisible]);

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Animated.View
        style={{
          transform: [
            {
              translateY: slideAnim.interpolate({
                inputRange: [0, 1],
                outputRange: [500, 0],
              }),
            },
          ],
        }}
      >
        <View style={{ backgroundColor: "red", padding: 20 }}>
          {/* 组件内容 */}
          <Button
            title={isVisible ? "推出屏幕" : "推入屏幕"}
            onPress={() => setIsVisible(!isVisible)}
          />
        </View>
      </Animated.View>
    </View>
  );
};

export default SlideInOutComponent;

在上述代码中，我们使用useState来管理组件的可见性状态isVisible。在组件渲染时，我们创建了一个初始值为0的slideAnim动画值，用于控制组件的推入和推出动画效果。

在useEffect钩子中，我们监听isVisible的变化，根据其值的变化来触发动画效果。当isVisible为true时，我们将slideAnim动画值推向1，实现组件推入的动画效果；当isVisible为false时，我们将slideAnim动画值推向0，实现组件推出的动画效果。使用Animated.timing方法来控制动画的执行时间和效果。

在组件的渲染部分，我们使用Animated.View包裹要进行动画的组件，并通过transform样式来设置动画效果。在这个示例中，我们使用了translateY属性来控制组件在垂直方向上的位移，根据slideAnim的值进行插值计算。

最后，我们通过一个按钮来控制isVisible状态的变化，从而触发推入和推出的动画效果。