复活的react-native不响应onFocus和onBlur

Question

我要做什么

当文本输入被聚焦时，我需要为View的背景颜色设置动画。

直到现在我一直在做什么

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

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

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

我将此函数传递给Animated TextInput，在控制台上没有出现错误，它显示了我设置的自定义背景色。但不要更改“焦点”或“模糊”。

代码

我正在使用打字稿

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（）进行某种状态更改而不会更新，但是我可能是错的，因为无论如何我都不是复活的专家。