在React Native中设置视图动画

Question

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

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还是react-native-navigation，但包含其中任何一个的解决方案都很棒。

Answer 1

尝试使用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;
}