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

Posted 2023-03-05

【中文标题】如何在 React Native 中更改 textInput 占位符的字体系列

【英文标题】：How to Change Font Family for textInput Placeholder in React Native

【发布时间】：2016-06-12 13:47:58

【问题描述】：

我必须更改textInput 的占位符文本的字体系列。如果我们添加此secureTextEntry=true，则为占位符文本设置提到的字体系列。

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

但是如果我们删除这个secureTextEntry=true，我们就不能为占位符设置font-family

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

样式是：文本框字段： 身高：39， 背景颜色：'#ffffff', 边距底部：0， fontFamily:'Inconsolata-Regular', ,

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

【问题讨论】：

这是一个 React Native 问题。计划在 RN 0.42 发布时发布修复程序。请参阅讨论here 和修复here。

【参考方案1】：

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

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

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

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

【参考方案2】：

试试这个：

<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

因为如果我们给 secureTextEntry=true 意味着 fontfamily 设置为占位符文本但字段更改为密码，所以只有我们这样写。 secureTextEntry=(this.state.email.length

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

【讨论】：

不要过于挑剔，但您不需要在车削中返回布尔值。它可以写成secureTextEntry=!this.state.email.length && this.state.emailStatus !== 'onFocus'

道具placeholderStyle 似乎没有记录。它也对我不起作用。 facebook.github.io/react-native/docs/textinput.html

"placeholderStyle" 对我也不起作用。这听起来是个好主意，是我遗漏了什么还是被弃用了？

这不应该是公认的答案，因为 placeholderStyle 至少在 RN 0.59 中不起作用。 Jon Wyatt 的条件样式方法对我有用

【参考方案3】：

Textinput 可以有一个 Text 子级。

所以你可以拥有

<TextInput>
 <Text style = value.length == 0? styles.hint : styles.input>
  value.length == 0? hint : value
 </Text>
</TextInput>

【参考方案4】：

您可以通过密码长度来处理此问题，例如：

  <TextInput
      secureTextEntry=this.state.password.length === 0? false : true
  />

【讨论】：

或者更简单地说，你可以说secureTextEntry= this.state.password.length > 0

【参考方案5】：

如果你想改变一次字体，你可以设置fontFamily: yourFontFamilyName

如果你打算在很多地方使用你的字体，我建议你创建一个类，每次都使用相同的 fontFamily ：

您可以这样做：（以 Quicksand 作为字体系列的示例）

import React, TextInput from 'react-native';

import _ from 'lodash';

var OldTextInput = TextInput;

class NewTextInput extends OldTextInput 
  defaultProps = ;
  render() 
    var props = _.clone(this.props);

    if (_.isArray(this.props.style))
      props.style.push(fontFamily: 'Quicksand-Regular');
     else if (props.style) 
      props.style = [props.style, fontFamily: 'Quicksand-Regular'];
     else 
      props.style = fontFamily: 'Quicksand-Regular';
    

    this.props = props;

    return super.render();
  ;


export default NewTextInput; 

然后通过在每个文件中要求它来使用 TextInput (import TextInput from './TextInput')

【讨论】：

我已尝试使用“fontFamily: Inconsolata-Regular”，但无法更改 PLACEHOLDER 的字体系列。我在上面添加了样式。

答案没有解决有关占位符的实际问题

【参考方案6】：

您可能会在使用 React Native

<TextInput ref=ref => ref && ref.setNativeProps( style:  fontFamily: 'FONT_NAME'  ) />

有关更多信息和可能更适合您的替代方法，请查看 Github 上的 issue thread