React Native Animated仅单向生效？浮动占位符输入框动画异常求助

我正在实现一个带有浮动占位符、背景色和阴影过渡的TextInput，需要处理空值、非空值、聚焦三种状态。在桌面端网页上效果正常，但在移动端，当输入或删除内容后失焦时，动画没有平滑过渡，直接跳转到目标状态。

我尝试过用useEffect来管理动画，但效果不理想，希望能找到解决办法。下面是我的TextField.tsx代码：

import React, { useState } from 'react'
import { TextInput, Animated, StyleSheet, View } from 'react-native'

const styles = StyleSheet.create({
  TextFieldWrapper: {
    borderRadius: 4,
    position: 'relative',
    marginTop: 20,
    width: 280,
    shadowOffset: { width: 0, height: 0},
    shadowColor: '#000000',
    shadowRadius: 10,
    elevation: 5,
  },
  TextField: {
    width: 280,
    paddingTop: 30,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 10,
    fontSize: 18,
    fontWeight: 'bold',
    borderRadius: 4
  },
  TextFieldLabel: {
    position: 'absolute',
    left: 10
  }
})

const TextField: React.FC<{ secureText: boolean, placeholder: string }> = ({secureText, placeholder}) => {
  const [value, setValue] = useState<string>('')
  const inputFocusAnimation = new Animated.Value(0)
  const inputContentAnimation = new Animated.Value(0)

  const emailLabelMarginTop = inputContentAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [20, 10]
  })
  const emailLabelFontSize = inputContentAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [18, 14]
  })
  const textFieldBackground = inputFocusAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: ['rgba(242,242,242,1)', 'rgba(255,255,255,1)']
  })
  const textFieldShadow = inputFocusAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [0, .2]
  })

  function handleFocus() {
    Animated.timing(
      inputFocusAnimation,
      { toValue: 1, duration: 300 }
    ).start()
    if(!value) {
      Animated.timing(
        inputContentAnimation,
        { toValue: 1, duration: 300 }
      ).start()
    }
  }

  function handleBlur() {
    Animated.timing(
      inputFocusAnimation,
      { toValue: 0, duration: 300 }
    ).start()
    if(!value) {
      Animated.timing(
        inputContentAnimation,
        { toValue: 0, duration: 300 }
      ).start()
    }
  }

  return (
    <Animated.View style={{...styles.TextFieldWrapper, backgroundColor: textFieldBackground, shadowOpacity: textFieldShadow}}>
      <TextInput
        secureTextEntry={secureText}
        style={styles.TextField}
        placeholder=' '
        onFocus={() => handleFocus()}
        onBlur={() => handleBlur()}
        onChangeText={(e: string) => setValue(e)}></TextInput>
      <Animated.Text style={{...styles.TextFieldLabel, top: emailLabelMarginTop, fontSize: emailLabelFontSize}}>{placeholder}</Animated.Text>
    </Animated.View>
  )
}

export default TextField

问题根源 #

你遇到的核心问题是函数组件每次渲染时都会重新创建Animated.Value实例。当value变化或者聚焦状态改变时，组件会重新渲染，导致之前的动画状态被重置。移动端因为渲染触发更频繁，这种状态重置就表现为动画直接跳变，没有平滑过渡。

解决方案 #

我们需要用useRef来保存Animated.Value的实例，确保它在组件整个生命周期内保持唯一；同时添加状态追踪和完善的动画触发逻辑，覆盖所有状态切换场景：

import React, { useState, useRef, useEffect } from 'react'
import { TextInput, Animated, StyleSheet, View } from 'react-native'

const styles = StyleSheet.create({
  TextFieldWrapper: {
    borderRadius: 4,
    position: 'relative',
    marginTop: 20,
    width: 280,
    shadowOffset: { width: 0, height: 0},
    shadowColor: '#000000',
    shadowRadius: 10,
    elevation: 5,
  },
  TextField: {
    width: 280,
    paddingTop: 30,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 10,
    fontSize: 18,
    fontWeight: 'bold',
    borderRadius: 4
  },
  TextFieldLabel: {
    position: 'absolute',
    left: 10
  }
})

const TextField: React.FC<{ secureText: boolean, placeholder: string }> = ({secureText, placeholder}) => {
  const [value, setValue] = useState<string>('')
  const [isFocused, setIsFocused] = useState(false)
  
  // 使用useRef保存动画实例，避免每次渲染重置
  const inputFocusAnimation = useRef(new Animated.Value(0)).current
  const inputContentAnimation = useRef(new Animated.Value(0)).current

  const emailLabelMarginTop = inputContentAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [20, 10]
  })
  const emailLabelFontSize = inputContentAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [18, 14]
  })
  const textFieldBackground = inputFocusAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: ['rgba(242,242,242,1)', 'rgba(255,255,255,1)']
  })
  const textFieldShadow = inputFocusAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [0, .2]
  })

  const handleFocus = () => {
    setIsFocused(true)
    // 背景和阴影动画
    Animated.timing(inputFocusAnimation, {
      toValue: 1,
      duration: 300,
      useNativeDriver: false // 动画属性不支持原生驱动，显式声明
    }).start()
    // 空值时触发标签上浮
    if (!value) {
      Animated.timing(inputContentAnimation, {
        toValue: 1,
        duration: 300,
        useNativeDriver: false
      }).start()
    }
  }

  const handleBlur = () => {
    setIsFocused(false)
    // 背景和阴影恢复动画
    Animated.timing(inputFocusAnimation, {
      toValue: 0,
      duration: 300,
      useNativeDriver: false
    }).start()
    // 空值时触发标签下沉
    if (!value) {
      Animated.timing(inputContentAnimation, {
        toValue: 0,
        duration: 300,
        useNativeDriver: false
      }).start()
    }
  }

  // 处理内容变化时的标签状态
  useEffect(() => {
    if (!value && !isFocused) {
      // 内容清空且未聚焦，标签下沉
      Animated.timing(inputContentAnimation, {
        toValue: 0,
        duration: 300,
        useNativeDriver: false
      }).start()
    } else if (value && !isFocused) {
      // 有内容且未聚焦，保持标签上浮
      Animated.timing(inputContentAnimation, {
        toValue: 1,
        duration: 300,
        useNativeDriver: false
      }).start()
    }
  }, [value, isFocused])

  return (
    <Animated.View style={{...styles.TextFieldWrapper, backgroundColor: textFieldBackground, shadowOpacity: textFieldShadow}}>
      <TextInput
        secureTextEntry={secureText}
        style={styles.TextField}
        placeholder=' '
        onFocus={handleFocus}
        onBlur={handleBlur}
        onChangeText={setValue}
        value={value} // 绑定value，确保受控组件
      />
      <Animated.Text style={{...styles.TextFieldLabel, top: emailLabelMarginTop, fontSize: emailLabelFontSize}}>{placeholder}</Animated.Text>
    </Animated.View>
  )
}

export default TextField

关键修改说明 #

1. 用useRef保存动画实例：确保动画状态在组件渲染过程中不会丢失，维持动画的连续性。
2. 添加isFocused状态：明确追踪输入框聚焦状态，便于在内容变化时判断是否需要调整动画。
3. 受控组件绑定：给TextInput添加value={value}，保证输入框状态与组件state完全同步，避免潜在的状态不一致问题。
4. 显式禁用原生驱动：由于我们动画的属性（backgroundColor、shadowOpacity、top、fontSize）不支持React Native原生动画驱动，显式设置useNativeDriver: false可以避免警告并确保动画正常运行。
5. 完善内容变化的动画逻辑：通过useEffect监听value和isFocused的变化，覆盖所有状态切换场景，比如用户删除所有内容后即使不切换焦点，标签也能正确下沉。

内容的提问来源于stack exchange，提问作者rgbsz