Cách Thay đổi Phông chữ Gia đình cho phần giữ chỗ textInput trong React Native

Question

Tôi phải thay đổi họ phông chữ cho văn bản Phần giữ chỗ của textInput. Nếu chúng tôi thêm số này secureTextEntry={true}, phông chữ được đề cập Gia đình được đặt cho văn bản trình giữ chỗ.

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

Nhưng nếu chúng ta loại bỏ secureTextEntry={true} này, chúng tôi không thể thiết lập font-family cho placeholder

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

Style là: textboxfieldd: { height: 39, backgroundColor: '# ffffff', marginBottom: 0, fontFamily: 'Inconsolata-Regular', },

Làm cách nào để thay đổi họ phông chữ cho văn bản giữ chỗ?

Answer 1

Hãy thử điều này:

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

Chính xác dòng này => secureTextEntry = {(! This.state.email.length < = 0 & & this.state.emailStatus = 'onFocus') đúng : false} giải quyết vấn đề.

Bởi vì nếu chúng tôi cung cấp secureTextEntry = {true} có nghĩa là phông chữ được đặt thành văn bản giữ chỗ nhưng trường được thay đổi thành mật khẩu, vì vậy chỉ cho chúng tôi viết như thế này. secureTextEntry = {(this.state.email.length < = 0 & & this.state.emailStatus = 'onFocus'!) đúng:? false}

Nếu đó chiều dài sân là 0 và không tập trung có nghĩa là nó sẽ thiết lập đúng secureTextEntry = {true} để văn bản giữ chỗ được đặt thành phông chữ được đề cập đến

Answer 2

Nếu bạn muốn thay đổi phông chữ một lần, bạn chỉ có thể thiết lập fontFamily: yourFontFamilyName

Nếu bạn có kế hoạch sử dụng phông chữ của bạn trong nhiều nơi tôi đề nghị bạn tạo ra một lớp mà sẽ sử dụng cùng một fontFamily Mỗi lần:

bạn có thể làm theo cách này: (ví dụ với Quicksand như 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; 

và sau đó sử dụng TextInput bằng cách yêu cầu nó trong mỗi tập tin (import TextInput from './TextInput')