Comment aligner correctement la saisie de texte dans React Native?

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
}

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'

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

paddingTop: 0,
paddingBottom: 0

Problème Github

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

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é.

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

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.

Cela a fonctionné pour moi (RN 0.61.5):

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

Just Incase vous cherchez du code:

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

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

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.

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"