Question

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

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

但是，如果我们删除此secureTextEntry={true}，我们就无法为占位符

设置font-family

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

样式是：textboxfieldd：{ 身高：39， backgroundColor：'＃fffffff'， marginBottom：0， fontFamily中： 'Inconsolata正规'， }，

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

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" />

正是这条线=＆gt; secureTextEntry = {（this.state.email.length＆lt; = 0＆amp;＆amp; this.state.emailStatus！=＆＃39; onFocus＆＃39;）？true：false}解决问题。

因为如果我们给予secureTextEntry = {true}意味着fontfamily设置为占位符文本但字段更改为密码，那么只有我们这样写。 secureTextEntry = {（this.state.email.length＆lt; = 0＆amp;＆amp; this.state.emailStatus！=＆＃39; onFocus＆＃39;）？true：false}

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

Answer 2

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

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

Answer 3

如果您想更改字体一次，只需设置fontFamily: yourFontFamilyName

即可

如果您计划在很多地方使用您的字体，我建议您创建一个将使用相同fontFamily everyTime的类：

你可以这样做:(例如Quicksand为font-family）

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;

然后通过在每个文件（import TextInput from './TextInput'）

中要求它来使用TextInput

Answer 4

我解决此问题的方法是根据值的存在或不存在即有条件地对fontFamily（或样式）进行样式设置。

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

通过这种方式，字体家族对于占位符（在value === ''时是斜体，在显示文本时是常规的。

上面没有像使用样式化组件那样经过测试，但是概念应该相同。同样，只有在将TextInput呈现为受控组件，以便您可以访问value的情况下，此方法才有效。

Answer 5

Textinput可以有一个Text子级。

这样您就可以

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

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

5 个答案: