Android 自定义“FloatingTitleTextInputField”不接受react native中TextInput的某些属性

我已经在我的react原生项目中创建了自定义

FloatingTitleTextInputField

组件，它工作正常

下面是我的

floating\u title\u text\u input\u 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,
  },
});

import React，{Component}来自'React'；
从“react native”导入{View，Animated，StyleSheet，TextInput，AppRegistry}；
从“属性类型”导入{string，func}；
导出默认类FloatingTitleTextInputField扩展组件{
静态类型={
属性名称：string.isRequired，
标题：string.isRequired，
值：string.isRequired，
updateMasterState:func.isRequired，
};
建造师（道具）{
超级（道具）；
const{value}=this.props；
this.position=新的动画.Value（值？1:0）；
此.state={
isFieldActive:false，
};
}
_handleFocus=（）=>{
如果（！this.state.isFieldActive）{
this.setState（{isFieldActive:true}）；
已设置动画。正时（此位置{
toValue:1，
持续时间：150，
}).start（）；
}
};
_车把杆=（）=>{
if（this.state.isFieldActive&&！this.props.value）{
this.setState（{isFieldActive:false}）；
已设置动画。正时（此位置{
toValue:0，
持续时间：150，
}).start（）；
}
};
_onChangeText=updatedValue=>{
const{attrName，updateMasterState}=this.props；
updateMasterState（属性名，updatedValue）；
};
_returnAnimatedTitleStyles=（）=>{
const{isFieldActive}=this.state；
返回{
顶部：this.position.interpolate({
输入范围：[0，1]，
输出范围：[14,0]，
}),
fontSize:isFieldActive？11.5:15，
颜色：isFieldActive？“白色”：“浅灰色”，
textAlign:'中心'，
};
};
render（）{
返回(
{this.props.title}
);
}
}
const Styles=StyleSheet.create({
容器：{
宽度：“100%”，
边框宽度：0，
边框底部宽度：0.5，
边框底部颜色：“白色”，
身高：50，
第四点：，
},
文本输入：{
尺寸：15，
玛金托普：5，
secureTextEntry:false，
//玛格丽特：10，
//玛吉宁：10，
//fontFamily:“Avenir Medium”，
颜色：'白色'，
},
占位符样式：{}，
标题样式：{
位置：'绝对'，
//fontFamily:“Avenir Medium”，
//左:3,，
//左:4,，
},
});

但我在上面的代码中面临以下问题

• 我无法在中间设置

  占位符

  文本
• 当我使用

  secureTextEntry={true}

  和

  password={true}

  时，它不起作用
• 当我将

  keyboardType

  设置为

  email address

  时，它不会用email打开键盘

有人能帮我解决以上问题吗

---

如果需要更多信息，请务必让我知道。提前谢谢。感谢您的努力。

我无法在中间设置占位符文本。-是指动画文本吗？尝试增加100%的宽度。或者将容器justifyContent&alignItems设置为“center”@Eran谢谢您的回复，让我试试这个