React Native Animated: значение не изменится в TextInput onFocus - PullRequest
Новая
       84

React Native Animated: значение не изменится в TextInput onFocus

0 голосов
/ 28 мая 2020

У меня есть анимированный текст-заполнитель в компоненте TextInput, который должен анимироваться в позицию выше, чем то, где он начинается.

Вот соответствующие части кода: 

//value is an incoming prop to this custom component
const [text, setText] = useState(value); 
const [isFieldActive, setIsFieldActive] = useState(false);

const position = new Animated.Value(text ? 1 : 0);

const handleFocus = () => {
  setIsFieldActive(true);

  Animated.timing(position, {
    toValue: 1,
    duration: 150,
  }).start();

  //clearOnFocus is an incoming prop to this custom component
  if (clearOnFocus) {
    setText('');
  }
};

const handleBlur = () => {
  if (isFieldActive && text) {
    setIsFieldActive(false);
    Animated.timing(position, {
      toValue: 0,
      duration: 150,
    }).start();
  }
};

const returnAnimatedTitleStyles = () => {
  return {
    top: position.interpolate({
      inputRange: [0, 1],
      outputRange: [25, 0],
    }),
    fontSize: isFieldActive ? titleActiveSize : titleInActiveSize,
    color: isFieldActive ? titleActiveColor : titleInactiveColor,
  };
};

return (
  <View style={style}>
    <View>
      <Animated.Text
        style={[styles.titleStyles, returnAnimatedTitleStyles()]}
      >
        {title}
      </Animated.Text>

      <TextInput
        value={text}
        style={styles.textInput}
        onFocus={handleFocus}
        onBlur={handleBlur}
        borderBottomColor={
          isFieldActive ? titleActiveColor : titleInactiveColor
        }
        onChangeText={text => setText(text)}
        keyboardType={keyboardType}
        secureTextEntry={hidePassword}
        {...props}
      />
    </View>

... и так далее ...

Проблема в том, что Animated.Text не перемещается вверх, когда курсор помещается на TextInput (т.е. на focus ). Он поднимается только тогда, когда я начинаю печатать. Не уверен, почему это происходит, так как TextInput onFocus должен вызвать handleFocus, который должен вызвать изменение позиции немедленно, а не позже, когда начнется набор текста.

...