Reactjs 使用重新激活的自定义开关组件

我使用reanimated创建了一个自定义开关组件。切换功能工作正常，它切换并调用onPress函数，该函数交替返回true或false

当initiState按状态或家长提供的新道具更改时，我想设置切换效果的动画，请帮助，谢谢

Switch.tsx

import React, { useMemo } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { timing, bInterpolate } from 'react-native-redash';
import { TapGestureHandler, State } from 'react-native-gesture-handler';
import Animated, { Easing } from 'react-native-reanimated';

interface SwitchProps {
  onPress: (data: any) => void;
  color: string;
  background: string;
  initState: boolean;
  change: any;
}
const { height } = Dimensions.get('window');
const size = {
  width: height >= 812 ? 60 : 50,
  height: height >= 812 ? 35 : 30,
};

const {
  Value,
  useCode,
  block,
  cond,
  eq,
  set,
  Clock,
  clockRunning,
  event,
  sub,
  stopClock,
  onChange,
  call,
  and,
  not,
} = Animated;


const Switch = ({
  color,
  onPress,
  background: backgroundColor,
  initState,
}: SwitchProps) => {
  const { state, isOn, animate, shouldAnimate, width, clock } = useMemo(
    () => ({
      state: new Value(State.UNDETERMINED),
      isOn: new Value(initState ? 1 : 0),
      animate: new Value(initState ? 1 : 0),
      clock: new Clock(),
      shouldAnimate: new Value(0),
      width: new Value(0),
    }),
    []
  );

  useCode(() => {
    return block([
      cond(eq(state, State.END), set(shouldAnimate, 1)),
      onChange(
        state,
        cond(
          and(eq(state, State.END), not(clockRunning(clock))),
          cond(
            eq(isOn, 1),
            call([], () => onPress(false)),
            call([], () => onPress(true))
          )
        )
      ),
      cond(and(eq(shouldAnimate, 1), eq(isOn, 0)), [
        set(
          animate,
          timing({
            from: animate,
            to: 1,
            duration: 100,
            easing: Easing.linear,
            clock,
          })
        ),
        cond(not(clockRunning(clock)), [set(shouldAnimate, 0), set(isOn, 1)]),
      ]),
      cond(and(eq(shouldAnimate, 1), eq(isOn, 1)), [
        set(
          animate,
          timing({
            from: animate,
            to: 0,
            duration: 100,
            easing: Easing.linear,
            clock,
          })
        ),
        cond(not(clockRunning(clock)), [set(shouldAnimate, 0), set(isOn, 0)]),
      ]),
    ]);
  }, [initState]);

  const translateX = bInterpolate(animate, 0, sub(size.height - 10, width));
  const backgroundWidth = bInterpolate(animate, 0, size.width);

  return (
    <TapGestureHandler
      onHandlerStateChange={event([{ nativeEvent: { state } }])}>
      <Animated.View
        onLayout={event([
          {
            nativeEvent: { width },
          },
        ])}
        style={{
          ...size,
          borderRadius: size.height / 2,
          overflow: 'hidden',
          backgroundColor: 'white',
        }}>
        <Animated.View
          style={{
            position: 'absolute',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            backgroundColor,
          }}
        />
        <Animated.View
          style={{
            flex: 1,
            backgroundColor: color,
            width: backgroundWidth,
          }}
        />

        <Animated.View
          style={[styles.circle, { transform: [{ translateX }] }]}
        />
      </Animated.View>
    </TapGestureHandler>
  );
};

const styles = StyleSheet.create({
  circle: {
    width: size.height - 2,
    height: size.height - 2,
    position: 'absolute',
    left: 1,
    top: 1,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,

    elevation: 3,
    backgroundColor: 'white',
    borderRadius: size.height - 2 / 2,
  },
});

Switch.defaultProps = {
  color: '#00000',
  onPress: () => {},
  initState: false,
  background: '#8c8c8c',
  change: [],
};

export default Switch;

import React，{usemo}来自“React”；
从“react native”导入{样式表，维度}；
从“react native redash”导入{timing，bInterpolate}；
从“反应本机手势处理程序”导入{TapGestureHandler，State}；
从“react native reanimated”导入动画，{Easing}；
界面切换道具{
onPress：（数据：任意）=>无效；
颜色：字符串；
背景：字符串；
initState：布尔；
更改：任何；
}
const{height}=Dimensions.get（'window'）；
常数大小={
宽度：高度>=812？60:50，
高度：高度>=812？35:30，
};
常数{
价值
使用代码，
块
康德，
情商，
设置
时钟，
时钟运行，
事件
附属的，
秒钟，
一旦改变，
呼叫
以及，
不
}=动画；
常数开关=({
颜色
新闻界，
背景：背景色，
国家，
}：SwitchProps）=>{
const{state，isOn，animate，shouldAnimate，width，clock}=useMemo(
() => ({
状态：新值（状态未确定），
isOn：新值（initState？1:0），
动画：新值（初始状态？1:0），
时钟：新时钟（），
应设置动画：新值（0），
宽度：新值（0），
}),
[]
);
使用代码（（）=>{
返回块([
cond（eq（state，state.END），set（shouldAnimate，1）），
一旦改变(
国家,，
康德(
和（eq（state，state.END），而不是（clockRunning（clock）），
康德(
等式（1），
调用（[]，（）=>onPress（false）），
调用（[]，（）=>onPress（true））
)
)
),
条件（和（等式（shouldAnimate，1），等式（isOn，0））[
设置(
使有生气
时机({
来源：动画制作，
致:1,，
持续时间：100，
放松：放松，线性，
时钟，
})
),
cond（非（时钟运行（时钟）），[set（shouldAnimate，0），set（isOn，1）]，
]),
条件（和（等式（shouldAnimate，1），等式（isOn，1））[
设置(
使有生气
时机({
来源：动画制作，
至:0,，
持续时间：100，
放松：放松，线性，
时钟，
})
),
cond（非（时钟运行（时钟）），[set（shouldAnimate，0），set（isOn，0）]，
]),
]);
}，[initState]）；
const translateX=bInterpolate（动画，0，子（size.height-10，width））；
const backgroundWidth=bInterpolate（动画，0，size.width）；
返回(
);
};
const styles=StyleSheet.create({
圆圈：{
宽度：尺寸。高度-2，
高度：size.height-2，
位置：'绝对'，
左:1,，
排名：1，
阴影颜色：“#000”，
阴影偏移：{
宽度：0，
身高:1,，
},
阴影不透明度：0.22，
阴影半径：2.22，
标高：3，
背景颜色：“白色”，
边界半径：大小。高度-2/2，
},
});
Switch.defaultProps={
颜色：“#00000”，
onPress:（）=>{}，
initState:false，
背景：“#8c8c8c”，
更改：[]，
};
导出默认开关；

你能为你创造的东西创建一个零食样本吗？你能为你创造的东西创建一个零食样本吗？