如何在 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: ‘#ffffff’, marginBottom:0, fontFamily:‘Inconsolata-Regular’, },

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

原文由 Thivya 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Thivya 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

这样，占位符的字体系列为斜体（当 value === '' 时）并且在显示文本时为常规字体。

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

原文由 Jon Wyatt 发布，翻译遵循 CC BY-SA 4.0 许可协议