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

本文介绍了如何在 React Native 中更改 TextInput 占位符的样式?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有没有办法为 React Native 中 TextInput 的 placeholder 设置 fontStyle: 'italic' only ?

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

查看此处的文档似乎您只能设置占位符和占位符TextColor.

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 
  value={this.state.myText}
  style={{ fontFamily: "MyFont" }}
  placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}
/>

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

textInput