Как изменить семейство шрифтов для заполнителя textInput в React Native

Я должен изменить шрифт для textInput текст заполнителя. Если мы добавим это secureTextEntry={true}, указанное семейство шрифтов установлено для текста-заполнителя.

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

но если мы удалим это secureTextEntry={true}, мы не можем установить шрифт для заполнителя

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

стиль: textboxfieldd: { высота: 39, backgroundColor: '#ffffff', marginBottom:0, fontFamily: 'Inconsolata-Regular', },

как я могу изменить шрифт для заполнитель текста ?

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.государство.электронная почта.длина

потому что если мы дадим secureTextEntry={true} означает, что fontfamily установлен в текст заполнителя, но поле изменено как пароль, поэтому только для этого мы написали так. secureTextEntry={(this.государство.электронная почта.длина

Если длина этого поля равна 0 и не сфокусирована, это означает, что он установит true secureTextEntry={true}, поэтому текст-заполнитель установлен в упомянутый fontfamily


Если вы хотите изменить шрифт, вы можете просто установить fontFamily: yourFontFamilyName

Если вы планируете использовать свой шрифт во многих местах, я предлагаю вам создать класс, который будет использовать один и тот же fontFamily каждый раз:

вы можете сделать это следующим образом: (пример с зыбучими песками в качестве семейства шрифтов)

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')