web-dev-qa-db-ja.com

React Native？でTextInputプレースホルダーのスタイルを変更する方法

React NativeのTextInputのplaceholderにfontStyle: 'italic'onlyを設定する方法はありますか？

ここではドキュメント は、プレースホルダーとplaceholderTextColorのみを設定できるようです。

androidiosreact-native
31
Zohar Levin

より一般的なソリューションに対するダニエルの答えを改善する

class TextInput2 extends Component {
  constructor(props) {
    super(props);
    this.state = { placeholder: props.value.length == 0 }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(ev) {
    this.setState({ placeholder: ev.nativeEvent.text.length == 0 }); 
    this.props.onChange && this.props.onChange(ev); 
  }
  render() {
    const { placeholderStyle, style, onChange, ...rest } = this.props;

    return <TextInput 
      {...rest} 
      onChange={this.handleChange}
      style={this.state.placeholder ? [style, placeholderStyle] : style}
      />
  }
}

使用法：

<TextInput2 
  text={this.state.myText}
  style={{ fontFamily: "MyFont" }}
  placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}
/>
21
Jake Coxon

placeholderTextColor propを使用して、プレースホルダーの色を設定できます。

<TextInput placeholderTextColor={'red'} />
18
Sebastián Lara

この機能は自分で構築できます。入力が空のときにプレースホルダーが表示されるため、状態を確認し、それに応じてfontStyleを変更できます。

<TextInput
  onChangeText={txt => this.setState({enteredText: txt})}
  fontStyle={this.state.enteredText.length == 0 ? 'italic' : 'normal'}
  style={style.input} />

何らかの理由で、これはfontFamily = Systemでは機能しないようです。したがって、fontFamilyを明示的に指定する必要があります。

10
Daniel Basedow

TextInputのコンテンツとplaceHolderは共通のスタイルを使用するため、placeHolderのfontWeightとfontSizeを設定できます。別の方法として、placeholderTextColorのプロパティTextInputを設定できます

4
Pober Wong

ステートレスコンポーネントを使用することもできます。

私のソリューションは次のとおりです。

まず、私の画面コンポーネントで...

import React from 'react';
import { View } from 'react-native';
import MyWrappedComponent from '../wherever/your/components/are/MyWrappedComponent';

class ScreenComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myText: null,
    };
    this.handleTextOnChange = this.handleTextOnChange.bind(this);
  }

  handleTextOnChange(myText) {
    this.setState({ myText });
  }

  render() {
    const { myText } = this.state

  return (
    <View>
      <MyWrappedComponent            
        value={myText}
        placeholder="My Placeholder Text"
        onChangeText={this.handleTextOnChange}
        style={styles.someStyle}
        placeholderStyle={style.somePlaceholderStyle}
      />
    </View>
  )
}

次に、ラップされたコンポーネントで...

import React from 'react';
import { TextInput } from 'react-native-gesture-handler';

const MyWrappedComponent = ({
  style,
  placeholderStyle,
  value,
  ...rest
}) => (
  <TextInput
    {...rest}
    style={!value ? [style, placeholderStyle] : style}
  />
);

export default MyWrappedComponent;
2
Filip Maslovaric

単にプレースホルダーの位置を調整したい場合は、内側をラップして、スタイルを追加できます：

<View style={{
    flex: 0.3,
    alignContent: "center",
    justifyContent: "center",
    alignSelf: "center"
    }}>

「alignContent」、「alignItems」、「justifyContent」が機能しない場合があるため、プレースホルダーを中央に揃えることができます。また：

inputContainerStyle={{
                    borderColor: 'transparent'
                }}

境界線のスタイルを設定します（上記のものは、 'react-native-elements'からの境界線を削除します）。

0
David Hahn