Jak poprawnie wyrównać wprowadzanie tekstu w React Native?

Wprowadzanie tekstu jest wyśrodkowane, jak naprawić to wejście tekstu, aby pobierało dane z lewego górnego rogu

Oto mój CSS do wprowadzania tekstu

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

Miałem ten sam problem, ale powyższe uwagi go nie rozwiązały. Istnieje właściwość stylu tylko dla systemu Android,textAlignVertical która rozwiązuje ten problem na wejściach wielowierszowych.

to znaczy textAlignVertical: 'top'

TextInput ma domyślne dopełnienie, zastąp je przez ustawienie:

paddingTop: 0,
paddingBottom: 0

Wydanie Github

Znalazłem rozwiązanie, które w Androidzie textAlignVertical: 'top'działa styl TextInput . ale w iOS multiline={true}działa właściwość TextInput .

Miałem podobny przypadek użycia w mojej aplikacji na iOS, gdzie TextInputwysokość wynosiła 100, a symbol zastępczy był wyświetlany na środku. Użyłem multiline={true}i sprawiło, że tekst pojawił się z góry. Mam nadzieję, że to pomoże.

Podaj, textAlignVertical : "top"że rozwiąże Twój problem.

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

Aktualizacja 2015-07-03: wielowierszowe wprowadzanie tekstu zostało scalone:

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

Te przykłady multilinii , że statek z reagują native w UI Explorer powinien działać zgodnie z dokumentacją.

Problem polega na tym, że wielowierszowe TextInput nie działa jeszcze poprawnie, a dokumenty wprowadzają w błąd. Zobacz ten problem na Github:

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

„Nie przeportowaliśmy jeszcze tej funkcji do oprogramowania typu open source”.

W tym wydaniu jest kod, który zapewnia minimalną funkcjonalność wielowierszową, więc możesz być w stanie go z tym uruchomić.

U mnie zadziałało (RN 0,61,5):

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

Just Incase szukasz kodu:

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

Dowiedziałem się na inspektora elementów, że dla iOS istnieje paddingTop: 5for multiline TextInputs. To było nadal stosowane, mimo że ustawiłem paddingVertical: 15dla wszystkich moich danych wejściowych. Rezultatem był nie wyśrodkowany tekst w wielowierszowych wejściach w systemie iOS. Rozwiązaniem było dodanie dodatkowo, paddingTop: 15jeśli TextInputjest, multilinea platformą jest iOS. Teraz wizualnie nie ma różnicy między wejściami pojedynczej linii i wieloliniowymi na obu platformach, Android i iOS.

Aby wyśrodkować tekst w pionie na obu platformach, użyj:

Do użytku na Androida textAlignVertical: "center"

Do użytku na iOS justifyContent: "center"