如何在React Native中更改TextInput占位符的样式?

有没有一种方法来设置fontStyle: 'italic' 用于React Native中TextInput的placeholder

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

Solutions Collecting From Web of "如何在React Native中更改TextInput占位符的样式?"

丹尼尔的答案改进为更通用的解决scheme

 class TextInput2 extends Component { constructor(props) { super(props); this.state = { placeholder: props.text.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' }} /> 

你可以自己构build这个function。 input为空时显示占位符,因此您可以检查您的状态并相应地更改fontStyle:

 <TextInput onChange={txt => this.setState({enteredText: txt})} fontStyle={this.state.enteredText.length == 0 ? 'italic' : 'normal'} style={style.input} /> 

出于某种原因,这似乎不适用于fontFamily = System。 所以你必须明确指定fontFamily。

TextInput的内容和placeHolder使用一个通用的样式,所以你可以为placeHolder设置fontWeight和fontSize。 另外,您可以为TextInput设置属性placeholderTextColor