Wie kann ich die Texteingabe in React Native korrekt ausrichten?

90

Die Texteingabe ist mittig ausgerichtet. So korrigieren Sie diese Texteingabe so, dass sie von der oberen linken Ecke eingegeben wird

Die Texteingabe ist mittig ausgerichtet. So korrigieren Sie diese Texteingabe so, dass sie von der oberen linken Ecke eingegeben wird

Hier ist mein CSS für die Texteingabe

/* 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
}
javascript ios reactjs react-native Vikramaditya
quelle
2
ähm ... mit was ausrichten? Ihre Frage gibt nicht an, was Sie versuchen zu tun.
Colin Ramsay
1
Was soll ich in mein CSS einfügen, damit mein Text in der oberen linken Ecke beginnt?
Vikramaditya

Antworten:

208

Ich hatte das gleiche Problem, aber die obigen Hinweise haben es nicht gelöst. Es gibt eine android-only - Stil Eigenschaft , textAlignVerticaldass behebt dieses Problem auf mehrzeilige Eingaben.

dh textAlignVertical: 'top'

Gianfranco P.
quelle
1
ist ios standardmäßig gelöst oder funktioniert dieses Update nur für Android?
dev_ter
2
@de__ter es ist nur für Android. Ich denke, iOS ist standardmäßig oben ausgerichtet, obwohl es eine Weile her ist, dass ich RN verwendet habe, also nicht wirklich bestätigt habe. Sie sind sich nicht sicher, ob / wie Sie sich in der Mitte ausrichten möchten, können aber eine Notiz machen oder bearbeiten, wenn Sie herausfinden, wie!
5
Genial, löste das TextInput Align-Problem mit multiline={true}in Android.
C.Lee
8
Wie kann es akzeptiert werden, wenn textAlignVertical es nur für Android ist?
Max
1
Arbeiten auch in iOS
deepelement
22

TextInput verfügt über eine Standardauffüllung. Überschreiben Sie diese, indem Sie Folgendes festlegen:

paddingTop: 0,
paddingBottom: 0

Github-Problem

Tarik Chakur
quelle
Das war mein Problem. Außerdem ist textAlignVertical laut Dokumentation
shoopi
18

Ich habe die Lösung gefunden, dass in Android der TextInput-Stil textAlignVertical: 'top'funktioniert. aber in ios funktioniert TextInput prop multiline={true}.

Aseel
quelle
5

Ich hatte einen ähnlichen Anwendungsfall in meiner iOS-App, in der TextInputdie Höhe 100 betrug und der Platzhalter in der Mitte angezeigt wurde. Ich habe verwendet multiline={true}und es ließ den Text von oben erscheinen. Hoffentlich hilft das.

Mahendra Liya
quelle
Gibt es eine Möglichkeit, es unten erscheinen zu lassen?
Johhan Santana
5

Geben Sie textAlignVertical : "top"das wird Ihr Problem lösen.

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

Update 03.07.2015: Mehrzeilige Texteingaben wurden jetzt zusammengeführt:

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

Die mehrzeiligen Beispiele , die im UI-Explorer mit React Native geliefert werden, sollten wie dokumentiert funktionieren.

Das Problem ist, dass der mehrzeilige TextInput noch nicht richtig funktioniert und die Dokumente irreführend sind. Bitte beachten Sie diese Github-Ausgabe:

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

"Wir haben diese Funktionalität noch nicht auf Open Source portiert."

In dieser Ausgabe befindet sich Code, der nur minimale mehrzeilige Funktionen bietet, sodass Sie ihn möglicherweise zum Laufen bringen können.

Colin Ramsay
quelle
1

Es hat bei mir funktioniert (RN 0.61.5): 

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

Nur für den Fall, dass Sie nach Code suchen:

<TextInput
placeholder={'comment goes here!'}
multiline
style={{textAlignVertical:'top', ...otherStyle}}
/>
ishab acharya
quelle
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
quelle
0

Ich habe per Element Inspector herausgefunden, dass es für iOS ein paddingTop: 5for multiline TextInputs gibt. Dies wurde immer noch angewendet, obwohl ich paddingVertical: 15alle meine Eingaben festgelegt habe. Das Ergebnis war ein nicht zentrierter Text in mehrzeiligen Eingaben unter iOS. Die Lösung wurde zusätzlich ein hinzufügen , paddingTop: 15wenn die TextInputist multilineund die Plattform iOS. Jetzt gibt es visuell keinen Unterschied zwischen einzeiligen und mehrzeiligen Eingängen auf beiden Plattformen, Android und iOS.

Daniel
quelle
0

Ich denke, es ist Standard für iOS, für Android in meinem Fall das Hinzufügen paddingVertical: 0,zum Textstil funktioniert.

m1kelle
quelle
-1

Verwenden Sie Folgendes, um Text auf beiden Plattformen vertikal mittig auszurichten.

Für Android textAlignVertical: "center"

Für ios verwenden justifyContent: "center"

Artur Eshenbrener
quelle