web-dev-qa-db-fra.com

Comment changer la famille de polices pour textInput Placeholder dans React Native

Je dois changer la famille de polices pour le texte fictif de textInput. Si nous ajoutons ce secureTextEntry={true}, la police de caractères mentionnée est définie pour le texte d’espace réservé. 

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

Mais si nous supprimons ce secureTextEntry={true}, nous ne pouvons pas définir famille de polices pour un espace réservé. 

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

Le style est: textboxfieldd: { Height: 39, BackgroundColor: '#ffffff', MarginBottom: 0, FontFamily: 'Inconsolata-Regular', },

Comment puis-je changer la famille de polices pour le texte fictif?

react-nativeplaceholder
10
Thivya

Essaye ça :

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

Exactement cette ligne => secureTextEntry = {(this.state.email.length <= 0 && this.state.emailStatus! = 'OnFocus')? True: false} résout le problème.

Parce que si nous donnons secureTextEntry = {true}, fontfamily est défini sur le texte fictif, mais le champ est modifié en tant que mot de passe. C'est pourquoi nous avons uniquement écrit comme ceci. secureTextEntry = {(this.state.email.length <= 0 && this.state.emailStatus! = 'onFocus')? true: false}

Si la longueur de ce champ est égale à 0 et que le paramètre n'est pas activé, cela signifie que la valeur true s'appliquera à secureTextEntry = {true}, de sorte que le texte de substitution est défini sur fontfamily.

7
Thivya

Si vous voulez changer la police une fois, vous pouvez simplement définir fontFamily: yourFontFamilyName

Si vous prévoyez d’utiliser votre police à plusieurs endroits, je vous suggère de créer une classe qui utilisera le même fontFamily everyTime:

Vous pouvez le faire de cette façon: (exemple avec Quicksand en tant que famille de polices)

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;

puis utilisez TextInput en l'exigeant dans chaque fichier (import TextInput from './TextInput')

1
G. Hamaide

La façon dont j'ai résolu ce problème consistait à appliquer un style conditionnel à fontFamily (ou style) sur la présence ou l'absence de la valeur, c'est-à-dire.

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

Ainsi, la famille de polices est en italique pour l’espace réservé (lorsque value === '') et régulière lorsque le texte est affiché.

Ce qui précède n’est pas testé car j’utilisais des composants stylés, mais le concept devrait être identique. De plus, cela ne fonctionne que si TextInput est rendu en tant que composant contrôlé afin que vous ayez accès à value.

0
Jon Wyatt