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

我必须更改textInput的占位符文本的字体系列。如果我们添加这个secureTextEntry={true}，提到的字体系列被设置为占位符文本。如何在React Native中更改textInput占位符的字体系列

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

但是，如果我们删除此secureTextEntry={true}，我们不能设置字体家族的占位符

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

风格是：textboxfieldd：{ 高度：39，的backgroundColor： '#FFFFFF'， marginBottom：0， fontFamily中： 'Inconsolata正规'， }，

我怎样才能改变字体家族的占位符的文本？

来源

2016-02-29 Thivya

这是一个React Native问题。计划在RN 0.42发布时发布修复程序。请参阅[此处]的讨论（https://github.com/facebook/react-native/issues/4600）和修复[here]（https://github.com/facebook/react-native/pull/12000）。 – x0z

试试这个：

<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.state.email.length < = 0 & & this.state.emailStatus = '聚焦状态'）真：false}解决了这个问题。

因为如果我们给secureTextEntry = {true}意味着fontfamily被设置为占位符文本，但字段被更改为密码，所以只有我们这样写。 secureTextEntry = {（this.state.email.length < = 0 & & this.state.emailStatus = '的onfocus'！）真的？假}

如果该字段长度为0，而不是专注意味着它会设置为true secureTextEntry = {true}所以占位符文本设置为提到fontfamily

来源

2016-05-28 11:07:33 Thivya

不是超级挑剔，但你不需要在turnery中返回布尔值。它可以写成'secureTextEntry = {！this.state.email.length && this.state.emailStatus！==''onFocus'}' – mg87

-1

如果你想一次更改字体，你可以设置fontFamily: yourFontFamilyName

如果你打算在很多地方使用的字体，我建议你创建一个将使用相同的fontFamily中每次一类：

你可以这样来做：（例如与流沙为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;

，然后要求其在每一个文件中使用的TextInput（import TextInput from './TextInput'）

来源

2016-02-29 14:36:30

我曾尝试使用“fontFamily：Inconsolata-Regular”，但无法更改PLACEHOLDER的Font家族。我已经添加了上面的样式。 – Thivya

但字体适用于文本输入中的文本？ –

是的，这是工作（对于textInput中的文本） – Thivya

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

回答

相关问题