android - style - text input email react native

¿Cómo cambiar el estilo del marcador de posición TextInput en React Native?

Question

¿Hay una manera de establecer fontStyle: ''italic'' solo para el placeholder de placeholder de TextInput en React Native?

Ver aquí la documentación parece que solo puede establecer un marcador de posición y un marcador de posición TextColor.

Answer 1

El contenido y placeHolder de TextInput utilizan un estilo común, por lo que puede establecer fontWeight y fontSize para placeHolder. Por otro lado, puede establecer la propiedad placeholderTextColor para TextInput

Answer 2

Mejorando la respuesta de Daniel para una solución más genérica.

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

Uso:

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

Answer 3

Puede configurar el color de su marcador de posición utilizando la propiedad placeholderTextColor .

<TextInput placeholderTextColor={''red''} />

Answer 4

Puedes construir esta funcionalidad tú mismo. El marcador de posición se muestra cuando la entrada está vacía, por lo que puede verificar su estado y cambiar el estilo de fuente en consecuencia:

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

Por alguna razón, esto no parece funcionar con fontFamily = System. Así que tienes que especificar explícitamente la familia de fuentes.

Answer 5

También puede utilizar un componente sin estado.

Aquí está mi solución:

Primero, en mi componente de pantalla ...

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>
  )
}

Luego, en mi componente envuelto ...

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;