react-native - 使用 Reanimated 更改 Y 轴上的文本位置

Question

我想在TextInput聚焦时创建一个带有浮动标签的自定义组件 - 当用户单击输入时，占位符会缩小并向上滑动。我正在Reanimated为此使用图书馆。

文本大小的动画可以正常工作，但是动画translateY似乎根本不起作用，我不确定我在这里缺少什么。

这里的组件：

const AnimatedTextInput:React.FC<Props> = ({ containerStyle, placeholderStyle, placeholder }) => {
  const [focused, setFocused] = useState(false);
  const fontSizeAnim = useSharedValue(focused ? 12 : 18);
  const positionAnim = useSharedValue(focused ? 0 : 1);

  useEffect(() => {
    fontSizeAnim.value = withTiming(focused ? 12 : 18, { duration: 200 });
    positionAnim.value = withTiming(focused ? 0 : 1);
  }, [focused]);

  const animatedTextSize = useAnimatedStyle(() => {
    return {
      fontSize: withTiming(fontSizeAnim.value),
      transform: [{ translateY: positionAnim.value * 20 }]
    };
  });

  return (
    <Animated.View style={containerStyle}>
      <TextInput
        style={{ borderBottomColor: BLACK_TEXT_COLOR, borderBottomWidth: 1 }}
        onFocus={() => { setFocused(true); }}
        onBlur={() => { setFocused(false); }}
        // editable={false}
      >
        <Animated.Text style={[placeholderStyle, animatedTextSize]}>
          {placeholder}
        </Animated.Text>
      </TextInput>
    </Animated.View>
  );

};