首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在React Native中更改TextInput占位符的样式?

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

Stack Overflow用户
提问于 2016-02-23 23:29:31
回答 10查看 91.2K关注 0票数 64

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

看起来你只能设置一个占位符和placeholderTextColor的here at the documentation

EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2016-09-29 15:33:34

对Daniel的答案进行改进,以获得更通用的解决方案

代码语言:javascript
复制
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}
      />
  }
}

用法:

代码语言:javascript
复制
<TextInput2 
  value={this.state.myText}
  style={{ fontFamily: "MyFont" }}
  placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}
/>
票数 33
EN

Stack Overflow用户

发布于 2018-05-31 08:09:24

您可以使用placeholderTextColor属性来设置占位符颜色。

代码语言:javascript
复制
<TextInput placeholderTextColor={'red'} />
票数 47
EN

Stack Overflow用户

发布于 2016-04-28 18:16:14

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

代码语言:javascript
复制
<TextInput
  onChangeText={txt => this.setState({enteredText: txt})}
  fontStyle={this.state.enteredText.length == 0 ? 'italic' : 'normal'}
  style={style.input} />

由于某些原因,这似乎不适用于fontFamily = System。因此,您必须显式指定fontFamily。

票数 19
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35581548

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档