react native - onchangetext - Cómo cambiar la familia de fuentes para el marcador de posición de entrada de texto en el nativo de React

react native text

Question

Tengo que cambiar la familia de fuentes para el texto Placeholder de textInput . Si agregamos este secureTextEntry={true} , la familia de fuente mencionada se establece para el texto del marcador de posición.

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

Pero si eliminamos este secureTextEntry={true} , no podemos establecer font-family para placeholder

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

El estilo es: textboxfieldd: {height: 39, backgroundColor: ''#ffffff'', marginBottom: 0, fontFamily: ''Inconsolata-Regular'',},

¿Cómo puedo cambiar la familia de fuentes para el texto del marcador de posición?

Answer 1

Si desea cambiar la fuente una vez, puede simplemente establecer fontFamily: yourFontFamilyName

Si planeas usar tu fuente en muchos lugares, te sugiero que crees una clase que use la misma fontFamily everyTime:

Puedes hacerlo de esta manera: (ejemplo con Quicksand como familia de fuentes)

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;

y luego use TextInput requiriéndolo en cada archivo ( import TextInput from ''./TextInput'' )

Answer 2

Prueba esto :

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

Exactamente esta línea => secureTextEntry = {(this.state.email.length <= 0 && this.state.emailStatus! = ''OnFocus'')? True: falso} resuelve el problema.

Porque si damos secureTextEntry = {true} significa que fontfamily se establece en texto de marcador de posición pero el campo cambió como contraseña, por lo que solo escribimos de esta manera. secureTextEntry = {(this.state.email.length <= 0 && this.state.emailStatus! = ''onFocus'')? true: false}

Si la longitud de ese campo es 0 y no está enfocada significa que establecerá true secureTextEntry = {true} para que el texto de marcador de posición se establezca en la familia de fuentes mencionada