如何在React Native中更改textInput占位符的字体系列

Question

我必须更改textInput占位符文本的字体系列.如果我们添加它secureTextEntry={true},则为占位符文本设置所提到的字体系列.

<TextInput style={styles.textboxfield}  secureTextEntry={true} placeholder="Password" />

但是如果我们删除它secureTextEntry={true},我们就不能为占位符设置font-family

<TextInput style={styles.textboxfield} placeholder="Password" />

样式是:textboxfieldd:{height:39,backgroundColor:'#fffffff',marginBottom:0,fontFamily:'Inconsolata-Regular',},

如何更改占位符文本的字体系列？

Answer 1

试试这个 :

<TextInput
    secureTextEntry={(this.state.email.length <= 0 && this.state.emailStatus != 'onFocus') ? true : false}
    style={styles.textboxfieldd}
    placeholderStyle={styles.textboxfieldd}
    onFocus={this.changeStatus.bind(this, 'emailStatus', 'onFocus', '')}
    onChangeText={(email) => this.setState({ email })}
    value={this.state.email}
    placeholder={this.state.emailStatusPH}
    placeholderTextColor="#D8D8D8" />

恰好这行=> secureTextEntry = {(this.state.email.length <= 0 && this.state.emailStatus!='onFocus')？true:false}解决问题.

因为如果我们给secureTextEntry = {true}意味着fontfamily设置为占位符文本但字段更改为密码,所以只有我们这样写.secureTextEntry = {(this.state.email.length <= 0 && this.state.emailStatus!='onFocus')？true:false}

如果该字段长度为0且未聚焦意味着它将设置为true secureTextEntry = {true},因此占位符文本设置为提及fontfamily

Answer 2

我解决这个问题的方法fontFamily是根据值的存在或不存在有条件地设置（或样式）样式，即

<TextInput
  style={{ fontFamily: value ? 'OpenSans-Regular' : 'OpenSans-Italic' }}
  value={value}
  onChangeText={onChange}
/>

这样，字体系列对于占位符（when value === ''）是斜体的，在显示文本时是常规的。

上面没有测试，因为我使用的是样式组件，但概念应该是相同的。此外，这仅在TextInput作为受控组件呈现时才有效，因此您可以访问value.