Пользовательский `FloatingTitleTextInputField` не принимает некоторые свойства TextInput в реагирующем - PullRequest
Новая
       30

Пользовательский `FloatingTitleTextInputField` не принимает некоторые свойства TextInput в реагирующем

0 голосов
/ 25 сентября 2019

У меня есть пользовательский FloatingTitleTextInputField Компонент в моем реактивном проекте, и он работает нормально

ниже мой floating_title_text_input_field.js файл 

import React, {Component} from 'react';
import {View, Animated, StyleSheet, TextInput, AppRegistry} from 'react-native';
import {string, func} from 'prop-types';

export default class FloatingTitleTextInputField extends Component {
  static propTypes = {
    attrName: string.isRequired,
    title: string.isRequired,
    value: string.isRequired,
    updateMasterState: func.isRequired,
  };

  constructor(props) {
    super(props);
    const {value} = this.props;
    this.position = new Animated.Value(value ? 1 : 0);
    this.state = {
      isFieldActive: false,
    };
  }

  _handleFocus = () => {
    if (!this.state.isFieldActive) {
      this.setState({isFieldActive: true});
      Animated.timing(this.position, {
        toValue: 1,
        duration: 150,
      }).start();
    }
  };

  _handleBlur = () => {
    if (this.state.isFieldActive && !this.props.value) {
      this.setState({isFieldActive: false});
      Animated.timing(this.position, {
        toValue: 0,
        duration: 150,
      }).start();
    }
  };

  _onChangeText = updatedValue => {
    const {attrName, updateMasterState} = this.props;
    updateMasterState(attrName, updatedValue);
  };

  _returnAnimatedTitleStyles = () => {
    const {isFieldActive} = this.state;
    return {
      top: this.position.interpolate({
        inputRange: [0, 1],
        outputRange: [14, 0],
      }),
      fontSize: isFieldActive ? 11.5 : 15,
      color: isFieldActive ? 'white' : 'dimgrey',
      textAlign: 'center',
    };
  };

  render() {
    return (
      <View style={Styles.container}>
        <Animated.Text
          style={[Styles.titleStyles, this._returnAnimatedTitleStyles()]}>
          {this.props.title}
        </Animated.Text>
        <TextInput
          value={this.props.value}
          style={Styles.textInput}
          underlineColorAndroid="transparent"
          onFocus={this._handleFocus}
          onBlur={this._handleBlur}
          secureTextEntry={false}
          placeholderStyle={Styles.placeholderStyle}
          onChangeText={this._onChangeText}
        />
      </View>
    );
  }
}

const Styles = StyleSheet.create({
  container: {
    width: '100%',
    borderWidth: 0,
    borderBottomWidth: 0.5,
    borderBottomColor: 'white',
    height: 50,
    marginVertical: 4,
  },
  textInput: {
    fontSize: 15,
    marginTop: 5,
    secureTextEntry: false,
    // marginStart: 10,
    // marginEnd: 10,
    // fontFamily: 'Avenir-Medium',
    color: 'white',
  },
  placeholderStyle: {},
  titleStyles: {
    position: 'absolute',
    // fontFamily: 'Avenir-Medium',
    // left: 3,
    // left: 4,
  },
});

, но я смотрю нижепроблема в коде выше

  • Я не могу установить placeholder текст в центре
  • , когда я использовал secureTextEntry={true} и password={true}, он не работает
  • Когда я устанавливаю keyboardType на email-address, он не открывает клавиатуру с электронной почтой

Может ли кто-нибудь помочь мне решить эту проблему

Если вам нужна дополнительная информация, пожалуйста, сообщитея знаю.Заранее спасибо.Ваши усилия будут оценены.

...