react-native reanimated不响应onFocus和onBlur

Question

我想要做的是

当文本输入被聚焦时，我需要对View的背景颜色进行动画处理。

我到现在为止所做的

我构建了一个具有两个函数onFocus和onBlur的组件--它只是一个来自react- event -reanimated的react-native-reanimated函数。

 const onFocus = event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: ({ target }) => set(colorAnimation, 1)
    }
  ]);

  const onBlur = event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: ({ target }) => set(colorAnimation, 0)
    }
  ]);

我将这个函数传递给一个动画TextInput，我在控制台上没有得到任何错误，它显示了我设置的自定义背景色。但不会改变焦点或模糊。

代码

我正在使用typescript

import React from 'react';
import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
import Reanimated from 'react-native-reanimated';
import { bInterpolateColor } from 'react-native-redash';
import styled from 'styled-components/native';

const { Clock, Value, event, set, debug, block, divide } = Reanimated;

const StyledTextInput = styled.TextInput`
  height: 40px;
  padding: ${props => props.theme.spacing.default * 2}px
    ${props => props.theme.spacing.default * 3}px;
`;

const AnimatedTextInput: typeof StyledTextInput = Reanimated.createAnimatedComponent(
  StyledTextInput
);

const Container = styled(Reanimated.View)`
  width: 100%;
  border: 1px solid ${props => props.theme.colors.border};
  background: #e3e7eb;
  border-radius: ${props => props.theme.shapping.borderRadius * 2};
`;

const TextInput = () => {
  const clock = new Clock();
  const colorAnimation = new Value(0);

  const onFocus = event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: ({ target }) => set(colorAnimation, 1)
    }
  ]);

  const onBlur = event<NativeSyntheticEvent<TextInputFocusEventData>>([
    {
      nativeEvent: ({ target }) => set(colorAnimation, 0)
    }
  ]);

  return (
    <Container
      style={{
        backgroundColor: bInterpolateColor(
          colorAnimation,
          { r: 255, g: 0, b: 0 },
          { r: 0, g: 0, b: 255 }
        )
      }}
    >
      <AnimatedTextInput onFocus={onFocus} onBlur={onBlur} />
    </Container>
  );
};

export default TextInput;

结果

​

​

Answer 1

据我所知，你没有正确使用binterpolatecolor。

从文档中：

const bInterpolateColor: (value: Animated.Adaptable<number>, color1: string | number, color2: string | number, colorSpace?: "hsv" | "rgb") => Animated.Node<number>;

你没有提供色彩空间(但这是可选的，所以我不知道它有多相关)，而且颜色1和颜色2只能是字符串或数字，而且你似乎已经给出了一个对象。

所以这是第一个问题，我也不确定容器组件是否会通过setstate()更新而不进行某种状态更改，但我可能错了，因为我无论如何都不是一个活跃的专家。