web-dev-qa-db-fra.com

Comment aligner correctement la saisie de texte dans rea native?

L'entrée de texte est centrée, comment corriger cette entrée de texte afin qu'elle prenne l'entrée à partir du coin supérieur gauche

The Text input is center aligned, how to fix this text input so that it takes input from top left corner

Voici mon css pour la saisie de texte

/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */

input: {
  flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150
}
javascriptiosreactjsreact-native
60
Vikramaditya

J'ai eu le même problème, mais les notes ci-dessus ne l'ont pas résolu. Il existe une propriété de style réservée à Android textAlignVertical qui résout ce problème sur les entrées multilignes.

c'est à dire. textAlignVertical: 'top'

133
user657199

J'ai trouvé la solution qui sous Android, style TextInput textAlignVertical: 'top' travaux. mais dans ios, TextInput prop multiline={true} travaux.

8
aseel

J'avais un cas d'utilisation similaire dans mon application iOS, où la hauteur de TextInput était de 100 et l'espace réservé affiché au milieu. J'ai utilisé multiline={true} et le texte apparaît en partant du haut. J'espère que ça t'as aidé.

5
Mahendra Liya

TextInput a un remplissage par défaut, remplacez-le en définissant:

paddingTop: 0,
paddingBottom: 0

question de Github

4
Tarik Chakur

Mise à jour 2015-07-03: les entrées de texte multilignes ont maintenant été fusionnées:

https://github.com/facebook/react-native/pull/991

Les exemples multilignes livrés avec React Natif dans l’UI Explorer) doivent fonctionner comme indiqué.

Le problème que vous aurez, c'est que TextInput multiligne ne fonctionne pas encore correctement et que les documents sont trompeurs. S'il vous plaît voir ce problème Github:

https://github.com/facebook/react-native/issues/279

"Nous n'avons pas encore transféré cette fonctionnalité vers l'open source."

Dans ce numéro, il y a du code qui donne une fonctionnalité multiligne minimale, alors vous pourrez peut-être le faire fonctionner avec ça.

3
Colin Ramsay

Just Incase vous cherchez le code:

<TextInput
placeholder={'comment goes here!'}
multiline
style={{textAlignVertical:'top', ...otherStyle}}
/>
0
ishab acharya