web-dev-qa-db-ja.com

React NativeのtextInputプレースホルダーのフォントファミリーを変更する方法

textInputのプレースホルダーテキストのフォントファミリーを変更する必要があります。これを追加するとsecureTextEntry={true}、前述のフォントファミリーはプレースホルダーテキストに設定されます。

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

しかし、これを削除するとsecureTextEntry={true}、プレースホルダーにfont-familyを設定できません

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

スタイルは：textboxfieldd：{height：39、backgroundColor： '#ffffff'、marginBottom：0、fontFamily： 'Inconsolata-Regular'、}、

プレースホルダーテキストのフォントファミリーを変更するにはどうすればよいですか？

react-nativeplaceholder
14
Thivya

これを試して ：

<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！= 'onFocus'）？true：false}は問題を解決します。

なぜなら、secureTextEntry = {true}を指定すると、fontfamilyはプレースホルダーテキストに設定されますが、フィールドはパスワードとして変更されるので、このように記述しただけです。 secureTextEntry = {（this.state.email.length <= 0 && this.state.emailStatus！= 'onFocus'）？true：false}

そのフィールド長が0でフォーカスされていない場合は、true secureTextEntry = {true}が設定されるため、プレースホルダーテキストは前述のfontfamilyに設定されます

8
Thivya

これを解決した方法は、値の有無に応じてfontFamily（またはスタイル）を条件付きでスタイル設定することでした。

<TextInput
  style={{ fontFamily: value ? 'OpenSans-Regular' : 'OpenSans-Italic' }}
  value={value}
  onChangeText={onChange}
/>

このように、フォントファミリーはプレースホルダーに対して斜体になります（value === ''）およびテキストが表示されている場合は通常。

上記はスタイル付きコンポーネントを使用していたためテストされていませんが、コンセプトは同じです。また、これは、TextInputが制御されたコンポーネントとしてレンダリングされ、valueにアクセスできる場合にのみ機能します。

3
Jon Wyatt

TextinputはTextの子を持つことができます。

だからあなたは持つことができます

<TextInput>
 <Text style = {value.length == 0? styles.hint : styles.input}>
  {value.length == 0? hint : value}
 </Text>
</TextInput>
2
Adam Katz

フォントを一度変更したい場合は、fontFamily: yourFontFamilyName

多くの場所でフォントを使用する予定がある場合は、同じfontFamily everyTimeを使用するクラスを作成することをお勧めします。

あなたはこの方法でそれを行うことができます：（fontsandとしてQuicksandを使用した例）

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;

そして、すべてのファイル（import TextInput from './TextInput'）

1
G. Hamaide