在React Native中动画边框颜色

Question

我正在尝试在React Native中设置边框颜色的动画，但动画并不起作用。边框颜色没有ORIGINAL_COLOR = '#a0a0a0' SUCCESS_COLOR = '#008FEB'，它是黑色的。如果键盘被隐藏，我该如何设置默认颜色ORIGINAL_COLOR = '#a0a0a0'？键盘出现时如何设置SUCCESS_COLOR = '#008FEB'？

const styles = StyleSheet.create({
  inputContainer: {
    borderBottomWidth: 1,
  },
});

<Input
  containerStyle={styles.inputContainer}
  underlineColorAndroid="transparent"
/>;

Input.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TextInput, Text, View, Animated, Keyboard } from 'react-native';
import styles from './styles';

const SUCCESS_COLOR = '#008FEB';
const ORIGINAL_COLOR = '#a0a0a0';

export default class Input extends Component {

  constructor(props) {
    super(props);
    this.color = new Animated.Value(ORIGINAL_COLOR);
  }

  componentWillMount () {
    this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
    this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
  }

  componentWillUnmount() {
    this.keyboardWillShowSub.remove();
    this.keyboardWillHideSub.remove();
  }

  keyboardWillShow = (event) => {
    console.log(SUCCESS_COLOR);
    Animated.timing(this.color, {
      duration: event.duration,
      toValue: SUCCESS_COLOR,
    }).start();
  };

  keyboardWillHide = (event) => {
    console.log(ORIGINAL_COLOR);
    Animated.timing(this.color, {
      duration: event.duration,
      toValue: ORIGINAL_COLOR,
    }).start();
  };

  render() {
    const {
      value,
    } = this.props;

    return (
        <Animated.View style={[styles.containerStyle, { borderBottomColor: this.color }]}>
            <TextInput
              ref="input"
              {...this.props}
              value={value}
            />
          </Animated.View>
    );
  }
}

Answer 1

在这里：https://snack.expo.io/@zvona/interpolation-of-color

关键是使用interpolate将数值更改为rgb值：

let borderBottomColor = this.color.interpolate({
    inputRange: [0, 1],
    outputRange: [ORIGINAL_COLOR, SUCCESS_COLOR]
});