如何在React Native中更改TextInput占位符的样式？ [英] How to change styling of TextInput placeholder in React Native?

问题描述

有没有办法为占位符设置 fontStyle：'italic' React Native中的TextInput>

Is there a way to set fontStyle: 'italic' only for the placeholder of the TextInput in React Native?

查看这里的文档似乎你只能设置一个占位符和placeholderTextColor。

looking here at the documentation seems like you can only set a placeholder and placeholderTextColor.

推荐答案

改进Daniel的答案更通用的解决方案

Improving on Daniel's answer for a more generic solution

class TextInput2 extends Component {
  constructor(props) {
    super(props);
    this.state = { placeholder: props.value.length == 0 }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(ev) {
    this.setState({ placeholder: ev.nativeEvent.text.length == 0 }); 
    this.props.onChange && this.props.onChange(ev); 
  }
  render() {
    const { placeholderStyle, style, onChange, ...rest } = this.props;

    return <TextInput 
      {...rest} 
      onChange={this.handleChange}
      style={this.state.placeholder ? [style, placeholderStyle] : style}
      />
  }
}

用法：

<TextInput2 
  text={this.state.myText}
  style={{ fontFamily: "MyFont" }}
  placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}
/>

这篇关于如何在React Native中更改TextInput占位符的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！