0

我想要做什么

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

我到现在为止所做的

我构建了一个具有两个功能的组件，onFocus并且onBlur- 它只是eventreact-native-reanimated 的一个功能。

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

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

我将此函数传递给动画文本输入，我在控制台上没有错误，它显示了我设置的自定义背景颜色。但不会改变焦点或模糊。

代码

我正在使用打字稿

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;

结果

文本输入屏幕截图

4

1 回答 1

1

据我所知，您没有正确使用 bininterpolatecolor 。

来自文档：

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

您没有提供颜色空间（但这是可选的，所以我不知道这有多相关），颜色 1 和颜色 2 也只能是字符串或数字，并且您已经给出了一个对象。

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

于 2020-03-09T01:26:20.293 回答