Question

我正在创建一个具有onFocus和onBlur动画的可重用Text组件，但是当我将其放入表单时；焦点和模糊事件触发表单中每个Input的动画...您能帮助我避免这种行为吗？

如果您需要更多详细信息，请参见以下代码，但我认为这很清楚

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;

Answer 1

我还没有完全解决您的问题，但是我创建了一个组件，当占位符被聚焦时为该占位符设置动画，如果值为空则返回动画，

查看此小吃示例https://snack.expo.io/@ashwith00/frowning-cookie

代码

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
  }
})

不要在可重用组件之间共享状态

1 个答案: