如何在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佔位符的字體系列

回答

相關問題