не разделять состояние между повторно используемым компонентом реагировать родной - PullRequest
Новая
       160

не разделять состояние между повторно используемым компонентом реагировать родной

0 голосов
/ 21 июня 2020

Я создаю многоразовый компонент Text с анимацией onFocus и onBlur, но когда я помещаю это в форму; событие focus и blur запускает анимацию для каждого ввода в форме ... вы можете помочь мне избежать этого поведения?

Вот код, если вам нужны дополнительные сведения, но я думаю, что это очень понятно 

import React, { Component } from 'react';
import { TextInput, View, Text, Animated, StyleSheet } from 'react-native';

const animatedPlaceholder = new Animated.Value(30);

class Input extends Component {

constructor(props) {
 super(props);
 this.state = {
  id: '',
  isFocused: false,
  textLength: 0
 };
}

secureTextEntry = this.props.secureTextEntry || false;
autoCapitalize = this.props.autoCapitalize || 'sentences';
keyboardType = this.props.keyboardType || 'default';
focus = () => {
 this.setState({isFocused: true});
 Animated.timing(animatedPlaceholder, {
  toValue: 0,
  duration: 300
 }).start();
}

blur = () => {
 this.setState({isFocused: false});

  Animated.timing(animatedPlaceholder, {
    toValue: 30,
    duration: 300
  }).start();

}

render() {
 return(
  <View {...this.props}>
    <Animated.Text style={
      this.state.isFocused ? styles.usedValue : styles.emptyValue
    } > {this.props.placeholder} </Animated.Text>
    <TextInput
      onFocus={this.focus}
      onBlur={this.blur}
      autoCapitalize={this.autoCapitalize}
      secureTextEntry={this.secureTextEntry}
      keyboardType={this.keyboardType}
        style={
          styles.textInput
        }
      />
  </View>
);
}
}

export default Input;

1 Ответ

0 голосов
/ 21 июня 2020

Я не совсем понял ваш вопрос, но я создал компонент, который анимирует заполнитель, когда он сфокусирован, анимирует назад, если значение пусто,

проверьте этот пример закуски https://snack.expo.io/@ashwith00 / хмурый повар ie

Код 

import React, { Component } from 'react';
import { TextInput, View, Text, Animated, StyleSheet } from 'react-native';

export default class Input extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      isFocused: false,
      textLength: 0,
    };
    this.animatedPlaceholder = new Animated.Value(0);
  }

  secureTextEntry = this.props.secureTextEntry || false;
  autoCapitalize = this.props.autoCapitalize || 'sentences';
  keyboardType = this.props.keyboardType || 'default';

  focus = () => {
    Animated.timing(this.animatedPlaceholder, {
      toValue: -40,
      duration: 300,
    }).start();
  };

  blur = () => {
    if (!this.props.value) {
    Animated.timing(this.animatedPlaceholder, {
      toValue: 0,
      duration: 300,
    }).start();
    }
  };

  render() {
    const {value, onChangeText} = this.props;
    return (
      <View  style={[ {
        justifyContent: 'center'
      }]}>
        <Animated.Text
          style={{
            position: 'absolute',
            transform: [{translateY: this.animatedPlaceholder}]
          }}>
          {' '}
          {this.props.placeholder}{' '}
        </Animated.Text>
        <TextInput
        value={value}
        onChangeText={onChangeText}
          onFocus={this.focus}
          onBlur={this.blur}
          autoCapitalize={this.autoCapitalize}
          secureTextEntry={this.secureTextEntry}
          keyboardType={this.keyboardType}
          style={styles.textInput}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  usedValue: {} ,
  emptyValue: {},
  textInput: {
    alignSelf: 'stretch',
    height: 50,
    borderWidth: 0.4
  }
})
...