首页 > 解决方案 > 如果我将该道具应用于仅输入文本,为什么占位符文本也会变为粗体?(安卓设备)

问题描述

我也管理了新的文本输入,也尝试了不同的逻辑来维护文本输入的样式,但不适用于 Android。我想知道我应该如何为输入文本和占位符文本应用两种不同的样式。我想为 plaholdet 文本和输入文本应用不同的样式。

React Native 自定义 TextInput 占位符

我也试过这个,也试过 react-native-elements 组件......

这是我的代码

export default class TextInput2 extends Component {
    constructor(props) {
      super(props);
      this.state = { placeholder: props.value.length == 0 }
      this.handleChange = this.handleChange.bind(this);
    }
    componentDidMount(){
        // console.log('hello')
        // console.log(this.state.placeholder)
        // console.log(this.props.value)
        // console.log(this.props.value.length == 0)
        this.setState({
            placeholder: this.props.value.length == 0
        })
    }
    componentDidUpdate(){
        // console.log('Update',this.props.value.length == 0)
        console.log(this.props.value)
    }
    handleChange(ev) {
      this.setState({ placeholder: ev.nativeEvent.text.length == 0 }); 
      this.props.onChange && this.props.onChange(ev); 
    }
    handleTextChange(text){
        this.setState({ placeholder: text.length == 0 }); 
        this.props.onChangeText && this.props.onChangeText(text); 
    }
    render() {
      const { placeholderStyle, style, onChange, onChangeText,value, ...rest  } = this.props;
      let textstyle=''; 
      if(this.props.value.length == 0){
        console.log('in if',this.props.value.length == 0)
            textstyle = placeholderStyle
       }else{
           console.log('in else',this.props.value.length == 0 )
           textstyle=style
       }
      return <TextInput 
        {...rest}
        value={value} 
        onChange={this.handleChange}
        onChangeText={(text)=>this.handleTextChange(text)}
        style={textstyle}
        />
    }
  }

标签: react-nativereact-native-android

解决方案


推荐阅读