web-dev-qa-db-fra.com

Comment changer le style de l'espace réservé TextInput dans React Native?

Est-il possible de définir fontStyle: 'italic' _ uniquement pour le placeholder du TextInput dans React Native?)?

looking ici dans la documentation semble que vous ne pouvez définir qu'un espace réservé et un espaceholderTextColor.

androidiosreact-native
31
Zohar Levin

Améliorer la réponse de Daniel pour une solution plus générique

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

Usage:

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

Vous pouvez définir la couleur de votre espace réservé en utilisant le placeholderTextColor prop.

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

Vous pouvez créer cette fonctionnalité vous-même. L'espace réservé s'affiche lorsque l'entrée est vide. Vous pouvez donc vérifier votre état et modifier le fontStyle en conséquence:

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

Pour une raison quelconque, cela ne semble pas fonctionner avec fontFamily = System. Donc, vous devez spécifier explicitement le fontFamily.

10
Daniel Basedow

Le contenu et placeHolder de TextInput utilisent un style commun. Vous pouvez donc définir fontWeight et fontSize pour placeHolder. D'autre part, vous pouvez définir la propriété placeholderTextColor pour TextInput

4
Pober Wong

Vous pouvez également utiliser un composant sans état.

Voici ma solution:

Tout d'abord, dans mon composant d'écran ...

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

Ensuite, dans mon composant emballé ...

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

Si vous souhaitez simplement ajuster le positionnement de votre espace réservé, vous pouvez envelopper l’intérieur et ajouter un style au:

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

cela permettra à l'espace réservé de s'aligner sur le centre car parfois, 'alignContent', 'alignItems', 'requireContent' peuvent ne pas fonctionner. Également:

inputContainerStyle={{
                    borderColor: 'transparent'
                }}

pour styliser toutes les lignes de bordure (celle ci-dessus supprime toutes les bordures provenant de 'react-native-elements').

0
David Hahn