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

【问题标题】：How to Change Font Family for textInput Placeholder in React Native如何在 React Native 中更改 textInput 占位符的字体系列
【发布时间】：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。

标签： react-native placeholder

【解决方案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

【讨论】：