Блог

Я хочу добавить animation к этому search bar . когда пользователь касается панели поиска, ее размер уменьшается, затем снова увеличивается и возвращается к размеру по умолчанию (например, анимация во всплывающих окнах)

Это мой код

 <View style={{flexDirection:'row',alignSelf:'center'}}>
        <TextInput
           
          onChangeText={(text) => setSearch(text)}
          onFocus={()=>{
            setSize('92%');
            setInterval(()=>{setSize('95%')},1000)
            }}
          placeholder="Search"
          style={{...styles.searchbox,width:size}}     
                             
        ></TextInput>   
 </View> 
 

В настоящее время я пытаюсь изменить ширину..

Во-первых, я предлагаю вам взглянуть на документацию RN animated, возможно, это поможет вам лучше понять, как работает анимация.

Кроме того, это зависит от того, что у вас там есть: компонент класса или компонент функции. Если вы используете функциональный компонент, вы могли бы сделать это следующим образом:

1. Создание пользовательского хука, вызываемого, скажем useAnimation() , который выглядел бы примерно так

 export const useAnimation = ({ doAnimation, duration, initialValue, finalValue }) => {
  const [animation, setAnimation] = useState(new Animated.Value(initialValue))

  useEffect(() => {
    Animated.spring(animation, {
      toValue: doAnimation ? initialValue : finalValue,
      duration,
      bounciness: 8,
      useNativeDriver: false
    }).start();
  }, [doAnimation]);

  return animation
} 

2. Как сказано в документации, вы можете анимировать только Animated компоненты, и, например, если вы хотите иметь анимированный View , тег будет <Animated.View> {...} </Animated.View , но для <TextInput> мы должны создать анимированный компонент:

   const AnimatedTextInput = Animated.createAnimatedComponent(TextInput) 

и объединение первых 2 шагов

 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput)
const [collapsed, setCollapsed] = useState(true)
 const animation = useAnimation({ doAnimation: collapsed, duration: 300, initialValue: 20, finalValue: 200 });

  const onFocusText = () => setWidth(false)
  return (
      <AnimatedTextInput
        onFocus={onFocusText}
        placeholder={"Search something"}
        style={{width: animation, height: 50, borderColor: 'gray', borderWidth: 1, borderRadius: 4, padding: 10}}
      />
      ) 

Кроме того, если у вас есть компонент класса, у вас может быть метод, который запустит анимацию (но не забывайте о шаге 2 , который необходим)

   private size: Animated.Value = new Animated.Value(COLLAPSED_VALUE)


  get resizeInputWidth(): Animated.CompositeAnimation {
    return Animated.timing(this.size, {
      toValue: EXPANDED_VALUE,
      duration: 500,
    })
  }
  
  startAnimation = () => this.resizeInputWidth.start()
  
  
  <AnimatedTextInput
      onFocus={this.startAnimation}
      style={{ width: this.size }}
  />