动画视图-react-native-reanimated 淡入淡出背景组件不会转到背景

Question

我对原生反应还很陌生。我相信这是一项简单的任务，但我似乎无法理解它。我有一个调用动画视图的按钮（它在整个覆盖屏幕中淡出并起作用），但该按钮不会进入后台（淡出）。 我已经在覆盖道具上尝试了海拔和 zIndex，但没有成功。任何提示或代码片段将不胜感激。

// App.js
import React from "react";

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

import Animated, {
    useSharedValue,
    withTiming,
    Easing,
    useAnimatedStyle,
} from "react-native-reanimated";

const App = () => {
    const fadeInOpacity = useSharedValue(0);

    const fadeIn = () => {

        console.log('clicked') 
        fadeInOpacity.value = withTiming(1, {
            duration: 1000,
            easing: Easing.linear,
        });

        
    };

    const animatedStyle = useAnimatedStyle(() => {
        return {
            opacity: fadeInOpacity.value, // Use the value directly
        };
    });

    return (
        <View style={styles.container}>
            <Animated.View
                style={[
                    styles.overlay,
                    animatedStyle,
                ]}
            >
            </Animated.View>
            <TouchableOpacity
                onPress={fadeIn}
                style={styles.button}
            >
                <Text style={styles.buttonText}>
                    Fade In
                </Text>
            </TouchableOpacity>
            
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#f0f0f0",
    },
    button: {
        marginTop: 20,
        backgroundColor: "blue",
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 5,
        shadowColor: "black",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.4,
        shadowRadius: 4,
        //elevation: 4,
    },
    buttonText: {
        color: "white",
        fontWeight: "bold",
        fontSize: 16,
    },

    overlay:{
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      backgroundColor: 'red',
      //elevation: 100,
      //zIndex:100
  }
});

export default App;

Answer 1

在使用 expo_router 之后，我发现解决方案是创建一个模式屏幕并在布局文件中设置适当的道具（见下文）

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{
          //Hide the header for this route
          headerShown: false,
      }} />
      <Stack.Screen
        name="modal"
        options={{
         // presentation: 'transparentModal',
          animation: 'fade',
          animationDuration: 2000,
          headerShown: false,
        }}
      />
    </Stack>
  );
}