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

Question

有没有办法fontStyle: 'italic' 只为placeholderReact Native中的TextInput 设置？

看这里的文档 似乎只能设置占位符和placeholderTextColor.

Answer 1

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

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' }}
/>

Answer 2

您可以使用placeholderTextColorprop 设置占位符颜色.

<TextInput placeholderTextColor={'red'} />

Answer 3

您可以自己构建此功能.输入为空时显示占位符,因此您可以检查状态并相应地更改fontStyle:

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

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

Answer 4

TextInput 的 Content 和 placeHolder 使用通用样式，因此可以为 placeHolder 设置 fontWeight 和 fontSize。其次，你可以设置属性placeholderTextColor为TextInput