Comment changer le style de TextInput espace réservé à Réagir Natif?

Est-il un moyen de mettre fontStyle: 'italic' seulement pour la placeholder de la TextInput à Réagir Natif?

à la recherche ici, à la documentation semble que vous ne pouvez définir un espace réservé et placeholderTextColor.

avez-vous le résoudre?
nope. serait heureux de trouver une solution
eh bien.. maintenant je suis coincé avec le même problème..
si vous avez besoin de changer juste la couleur, look que répondre

InformationsquelleAutor Zohar Levin | 2016-02-23

Amélioration sur Daniel réponse pour une solution 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}
      />
  }
}

Utilisation:

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

InformationsquelleAutor Jake Coxon

18

Vous pouvez configurer votre espace réservé couleur en utilisant la placeholderTextColor prop.
```
<TextInput placeholderTextColor={'red'} />
```
- Agréable et facile, il fonctionne correctement!
- C'était la réponse que je cherchais, pas la réponse à la question initiale de ce fil, mais toujours.. aidé moi!
InformationsquelleAutor Sebastián Lara
10

Vous pouvez construire cette fonctionnalité vous-même. L'espace réservé est affiché lorsque l'entrée est vide, de sorte que vous pouvez vérifier votre état et de changer le style 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 = Système. Donc, vous devez spécifier explicitement le fontFamily.
- onChange passe un objet d'événement, d'obtenir le texte, il faut utiliser event.nativeEvent.text
- Ou utiliser onChangeText qu'il transmet simplement le texte
InformationsquelleAutor Daniel Basedow
4

Contenu et de l'espace réservé de TextInput utiliser un style commun, de sorte que vous pouvez définir fontWeight et fontSize pour l'espace réservé. Pour une autre, vous pouvez définir la propriété placeholderTextColor pour TextInput

InformationsquelleAutor Pober Wong

Vous pouvez également utiliser un apatride composant.

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

Alors, dans mon enveloppé composant...

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;

InformationsquelleAutor Filip Maslovaric

0

Si vous souhaitez simplement régler votre espace réservé est le positionnement que vous pouvez placer à l'intérieur d'un et ajouter un style à l' :
```
<View style={{
    flex: 0.3,
    alignContent: "center",
    justifyContent: "center",
    alignSelf: "center"
    }}>
```
il va permettre à l'espace réservé aligner vers le centre, comme parfois "alignContent', 'alignItems', 'justifyContent' peut ne pas fonctionner. Aussi:
```
inputContainerStyle={{
                    borderColor: 'transparent'
                }}
```
de style de toutes les frontières (l'un au-dessus supprime les frontières qui viennent de réagir-native-éléments").

InformationsquelleAutor David Hahn

Vous devez vous connecter pour publier un commentaire.