Come allineare correttamente l'input di testo in React Native?

L'input di testo è allineato al centro, come correggere questo input di testo in modo che riceva l'input dall'angolo superiore sinistro

Ecco il mio css per l'immissione di testo

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

Ho avuto lo stesso problema, ma le note sopra non lo hanno risolto. C'è una proprietà di stile solo per AndroidtextAlignVertical che risolve questo problema sugli input multilinea.

cioè textAlignVertical: 'top'

TextInput ha un riempimento predefinito, sovrascriverlo impostando:

paddingTop: 0,
paddingBottom: 0

Problema di Github

Ho trovato la soluzione che in Android, lo stile TextInput textAlignVertical: 'top'funziona. ma in ios, TextInput prop multiline={true}funziona.

Ho avuto un caso d'uso simile nella mia app iOS, in cui l' TextInputaltezza era 100 e il segnaposto era mostrato al centro. Ho usato multiline={true}e ha fatto apparire il testo dall'alto. Spero possa aiutare.

Dare textAlignVertical : "top"che risolverà il tuo problema.

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

Aggiornamento 2015-07-03: gli input di testo multilinea ora sono stati uniti:

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

Gli esempi su più righe forniti con React Native in UI Explorer dovrebbero funzionare come documentato.

Il problema che avrai è che TextInput multilinea non funziona ancora correttamente e i documenti sono fuorvianti. Si prega di consultare questo problema di GitHub:

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

"Non abbiamo ancora portato questa funzionalità all'open source".

C'è del codice in quel numero che fornisce funzionalità multilinea minime, quindi potresti riuscire a farlo funzionare con quello.

Ha funzionato per me (RN 0.61.5):

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

Solo nel caso in cui stai cercando il codice:

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

Ho scoperto per ogni elemento inspector, che per iOS esiste un paddingTop: 5for multiline TextInputs. Questo è stato ancora applicato anche se ho impostato paddingVertical: 15tutti i miei input. Il risultato è stato un testo non centrato in input multilinea su iOS. La soluzione era aggiungere anche un paddingTop: 15se TextInputè multilinee la piattaforma è iOS. Ora visivamente non c'è alcuna differenza tra input a riga singola e multilinea su entrambe le piattaforme, Android e iOS.

Penso che sia l'impostazione predefinita per iOS, per Android nel mio caso l'aggiunta paddingVertical: 0,allo stile di testo ha funzionato.

Le risposte precedenti forniscono sia per iOS che per Android, il che può essere abbastanza fuorviante, quindi questo lo risolve per entrambe le piattaforme.

<TextInput
style={{
flex: 1,
width: "100%",
height: 150,
color: "#FFF",
textAlignVertical: "top", // android fix for centering it at the top-left corner 
}}
multiline={true} // ios fix for centering it at the top-left corner 
numberOfLines={10}
/>

Per Android -

style={{
//...
flex:1,
textAlignVertical: "top", // android fix for centering it at the top-left corner 
//...
}}

Per iOS, aggiungi multiline={true} al <TextInput/>componente

Per allineare il testo verticalmente al centro su entrambe le piattaforme usa:

Per uso Android textAlignVertical: "center"

Per uso ios justifyContent: "center"