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

Question

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

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

但是如果我们删除这个secureTextEntry={true}，我们就不能为占位符设置字体系列

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

样式是：textboxfieldd：{ 身高：39，背景颜色：'#ffffff'， marginBottom:0, 字体系列：'Inconsolata-Regular'， },

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

Answer 1

如果想换一次字体，直接设置fontFamily: yourFontFamilyName

如果您打算在很多地方使用您的字体，我建议您创建一个 class 每次都使用相同的 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')

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

Exactly this line => secureTextEntry={(this.state.email.length<=0 && this.state.emailStatus!='onFocus') ?true:false} solves the problem .

Because if we give secureTextEntry={true} means fontfamily is set to placeholder text but field changed as password , so for that only we wrote like this . secureTextEntry={(this.state.email.length<=0 && this.state.emailStatus!='onFocus') ?true:false}

If that field length is 0 and not focused means it will set true secureTextEntry={true} so the placeholder text is set to mentioned fontfamily

Answer 3

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

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

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

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

Answer 4

Textinput 可以有一个 Text 子项。

所以你可以

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

Answer 5

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

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

Answer 6

您可能在 Android 上使用 React Native <= 0.64 遇到过这种情况。在这种情况下，这里有一个解决方案：

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

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

上的 issue thread

Answer 7

添加字体大小={20}

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

Answer 8

对我有用

      fontWeight: 'normal',

祝你好运:)

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

How to Change Font Family for textInput Placeholder in React Native

placeholder

react-native