在React Native中动画化视图

问题描述

我有一个带有导航和一个组件的简单应用程序。

export default function App() {

  const Stack = createStackNavigator();

  return (

      <NavigationContainer>

            <logo/>

            <Stack.Navigator>

                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen name="Details" component={DetailsScreen}/ >

            </Stack.Navigator>

      </NavigationContainer>

  );

}

HomeScreen组件具有一个简单的淡入淡出动画，可在应用程序启动时触发。

export const HomeScreen = ({navigation})=>{

    const fadeAnim = useRef(new Animated.Value(0)).current;

    React.useEffect(() => {
        Animated.timing(
          fadeAnim,{
            tovalue: 1,duration: 350,}
        ).start();
      },[fadeAnim]);

    return (
        <Animated.View style={{opacity: fadeAnim}} >
            <Text>
                Hello World
            </Text>
        </Animated.View>
    )
    
  }

问题在于，视图更改时fadeAnim动画不会重新启动。加载“详细信息”屏幕，然后再次进入“主屏幕”，找到处于最终状态的组件。

如何使“主”屏幕每次都消失？

不确定使用react-native还是@R_502_185@是正确的解决方案，但是涉及其中任何一个的解决方案都很好。

解决方法

尝试使用useFocusEffect

import { useFocusEffect } from '@react-navigation/native';

function HomeScreen() {
  const [fadeAnim] = useState(new Animated.Value(0));

  useFocusEffect(
    React.useCallback(() => {
      Animated.timing(
        fadeAnim,{
          toValue: 1,duration: 350,}
      ).start();
    },[fadeAnim])
  );

  return yourComponents;
}