Comment aligner correctement la saisie de texte dans React Native?

89

L'entrée de texte est alignée au centre, comment corriger cette entrée de texte afin qu'elle prenne l'entrée du coin supérieur gauche

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
}

— Vikramaditya
source

2

euh ... l'aligner avec quoi? Votre question ne précise pas ce que vous essayez de faire.

— Colin Ramsay

1

que dois-je ajouter dans mon css pour que mon texte commence par le coin supérieur gauche?

— Vikramaditya

202

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 Android uniquementtextAlignVertical qui résout ce problème sur les entrées multilignes.

c'est à dire textAlignVertical: 'top'

— Gianfranco P.
source

1

ios est-il résolu par défaut ou ce correctif ne fonctionne-t-il que pour Android?

— dev_ter

2

@dev_ter c'est uniquement pour Android. Je pense qu'iOS est aligné en haut par défaut, même si cela fait un moment que je n'ai pas utilisé RN donc je n'ai pas vraiment confirmé. Je ne sais pas si / comment vous vous alignez au milieu, mais n'hésitez pas à faire une note ou à modifier si vous découvrez comment!

5

Génial, a résolu le problème d'alignement TextInput avec multiline={true}Android.

— C.Lee

8

Comment cela peut-il être accepté si ce textAlignVertical n'est que pour Android?

— Max

1

Travailler aussi sous iOS

— deepelement

21

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

paddingTop: 0,
paddingBottom: 0

Problème Github

— Tarik Chakur
source

C'était mon problème. En outre, textAlignVertical n'est pas un accessoire selon la documentation

— shoopi

18

J'ai trouvé la solution que dans Android, le style TextInput textAlignVertical: 'top'fonctionne. mais dans iOS, le prop TextInput multiline={true}fonctionne.

— Aseel
source

5

J'ai eu un cas d'utilisation similaire dans mon application iOS, dans lequel la TextInputhauteur du s était de 100 et l'espace réservé était affiché au milieu. J'ai utilisé multiline={true}et cela a fait apparaître le texte du haut. J'espère que ça t'as aidé.

— Mahendra Liya
source

y a-t-il un moyen de le faire apparaître en bas?

— Johhan Santana

5

Donnez textAlignVertical : "top"cela résoudra votre problème.

<TextInput placeholder="Your text post" multiline={true} numberOfLines={10}, maxLength={1000} style={{ borderWidth: 1, backgroundColor: "#e3e3e3", textAlignVertical : "top" }} />

— Sukshith S
source

3

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

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

Les exemples multilignes fournis avec React Native dans l'explorateur d'interface utilisateur doivent fonctionner comme indiqué.

Le problème que vous aurez est que TextInput multiligne ne fonctionne pas encore correctement et que les documents sont trompeurs. Veuillez consulter ce problème Github:

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

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

Il y a du code dans ce problème qui donne une fonctionnalité multiligne minimale, vous pourrez donc peut-être le faire fonctionner avec cela.

— Colin Ramsay
source

1

Cela a fonctionné pour moi (RN 0.61.5):

<TextInput style={{textAlignVertical:'top', paddingTop: 0, paddingBottom:0 }} />

— Andrey Patseiko
source

0

Just Incase vous cherchez du code:

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

— ishab acharya
source

0

import { Dimensions} from 'react-native';
const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);

// ...
intext: {
    height:screenHeight - 10,
    textAlignVertical: 'top',
    fontSize:17,
    padding:12,
    fontFamily:'courier',
    margin:10,     
},

— user9806259
source

0

J'ai découvert par inspecteur d'élément que pour iOS, il existe un paddingTop: 5pour multiline TextInputs. Cela était toujours appliqué même si je définissais paddingVertical: 15toutes mes entrées. Le résultat était un texte non centré dans les entrées multilignes sur iOS. La solution était d'ajouter en plus un paddingTop: 15si le TextInputest multilineet la plate-forme est iOS. Désormais, il n'y a visuellement aucune différence entre les entrées à une seule ligne et à plusieurs lignes sur les deux plates-formes, Android et iOS.

— Daniel
source

-1

Pour que le texte soit aligné verticalement au centre des deux plates-formes, utilisez:

Pour une utilisation Android textAlignVertical: "center"

Pour une utilisation iOS justifyContent: "center"

— Artur Eshenbrener
source

Ne fonctionne pas sur iOS.

— Abdul Mateen