0

我是初学者。我正在使用react-native-reanimated动画库。当我切换回主屏幕时，我想重新开始我的动画。如下图所示。例如。当我导航到帐户屏幕然后返回导航到主屏幕时，动画会重新启动。

图片：截图

主屏幕

代码

import React from 'react';
import {StyleSheet, Text, View, ImageBackground, Image} from 'react-native';
import {images, COLORS, SIZES, FONTS} from '../../constants';
import ViewCard from '../../components/common/ViewCard';
const HomeScreen = ({navigation}) => {
  return (
    <ImageBackground
      source={images.background}
      style={styles.background}
      resizeMode="cover">
      <View
        style={{
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <View style={styles.userIcon}>
          <Image
            source={images.user}
            style={{
              width: SIZES.width * 0.17,
              height: SIZES.width * 0.17,
            }}
            resizeMode="contain"
          />
        </View>
        <Text style={{...FONTS.h1, fontWeight: 'bold'}}>Welcome Ali!</Text>
      </View>
      <View
        style={{
          marginTop: SIZES.radius,
          flex: 1,
          backgroundColor: COLORS.primaryOpacity,
          borderTopLeftRadius: 60,
          borderTopRightRadius: 60,
        }}>
        <View style={[styles.viewCardContainer, {marginTop: SIZES.padding2}]}>
          <ViewCard bgColor={COLORS.lightCoral} delay={500} />
          <ViewCard bgColor={COLORS.lightGreen} delay={750} />
        </View>
        <View style={styles.viewCardContainer}>
          <ViewCard bgColor={COLORS.lightOrange} delay={1000} />
          <ViewCard bgColor={COLORS.lightGoldenrod} delay={1250} />
        </View>
      </View>
    </ImageBackground>
  );
};

export default HomeScreen;
const iconSize = SIZES.width * 0.2;
const styles = StyleSheet.create({
  background: {
    flex: 1,
  },
  userIcon: {
    marginTop: SIZES.height * 0.09,
    marginBottom: SIZES.base,
    width: iconSize,
    height: iconSize,
    borderRadius: iconSize / 2,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: COLORS.lightGray,
    borderWidth: 2,
  },
  viewCardContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: SIZES.radius,
    marginHorizontal: SIZES.radius,
  },
});

查看卡

组件代码：

import React, {useEffect} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {FONTS, SIZES} from '../../constants';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withDelay,
} from 'react-native-reanimated';
const ViewCard = props => {
  const {bgColor, delay} = props;
  const progress = useSharedValue(0);
  const scale = useSharedValue(0);
  const reanimatedStyle = useAnimatedStyle(() => {
    return {
      borderRadius: progress.value * SIZES.padding,
      transform: [{scaleY: scale.value}],
    };
  }, []);
  useEffect(() => {
    scale.value = withDelay(delay, withSpring(1));
    progress.value = withDelay(delay + 250, withSpring(1));
  }, []);
  return (
    <Animated.View
      style={[
        styles.container,
        {backgroundColor: bgColor},
        reanimatedStyle,
      ]}></Animated.View>
  );
};

export default ViewCard;
const styles = StyleSheet.create({
  container: {
    width: SIZES.width / 2.35,
    height: SIZES.height / 3.4,
    marginHorizontal: 20,
  },
});
4

0 回答 0