So ändern Sie die Schriftfamilie für textInput Platzhalter in React Native

Question

Ich muss die Schriftfamilie für textInput 's Platzhalter Text ändern. Wenn wir dieses secureTextEntry={true} hinzufügen, wird die erwähnte Schriftart Family für Platzhaltertext festgelegt.

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

Aber wenn wir diese secureTextEntry={true} entfernen, können wir nicht font-family-Set für Platzhalter

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

Style ist: textboxfieldd: { Höhe: 39, Backgroundcolor: '# FFFFFF' Margin: 0, family: 'Inconsolata-Regular', },

Wie kann ich die Schriftfamilie für Platzhalter-Text ändern?

Answer 1

Versuchen Sie dies:

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

Genau diese Linie => secureTextEntry = {(! This.state.email.length < = 0 & & this.state.emailStatus = 'onFocus') wahr : false} löst das Problem.

Denn wenn wir secureTextEntry = {true} geben bedeutet fontfamily wird auf Platzhaltertext gesetzt aber Feld als Passwort geändert, so dass wir nur so geschrieben haben. secureTextEntry = {(this.state.email.length < = 0 & & this.state.emailStatus = 'onFocus'!) true: false}

Wenn das Feldlänge 0 und nicht fokussiert bedeutet es wahr gesetzt wird secureTextEntry = {true} so der Platzhalter-Text festgelegt ist fontfamily erwähnt

Answer 2

Wenn Sie die Schrift einmal ändern möchten, können Sie einstellen, nur fontFamily: yourFontFamilyName

Wenn Sie sich mit Ihrer Schrift in vielen Ort planen, empfehle ich Ihnen, eine Klasse erstellen, die die gleiche family jedes Mal verwenden:

Sie können es auf diese Weise tun: (Beispiel mit Quicksand als 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; 

und dann TextInput- verwenden, indem Sie es in jeder Datei benötigen (import TextInput from './TextInput')