¿Cómo alinear la entrada de texto correctamente en react native?

La entrada de texto está alineada al centro, cómo arreglar esta entrada de texto para que tome la entrada desde la esquina superior izquierda

Aquí está mi css para la entrada de texto

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

Tuve el mismo problema, pero las notas anteriores no lo resolvieron. Hay una propiedad de estilo solo para AndroidtextAlignVertical que soluciona este problema en entradas multilínea.

es decir textAlignVertical: 'top'

TextInput tiene relleno predeterminado, anótelo configurando:

paddingTop: 0,
paddingBottom: 0

Problema de Github

Encontré la solución que en Android, el estilo TextInput textAlignVertical: 'top'funciona. pero en ios, la función TextInput multiline={true}funciona.

Tuve un caso de uso similar en mi aplicación iOS, en el que la TextInputaltura de la 'era 100 y el marcador de posición se mostraba en el medio. Usé multiline={true}e hizo que el texto apareciera desde arriba. Espero que ayude.

Dar textAlignVertical : "top"que resolverá tu problema.

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

Actualización 2015-07-03: ahora se han combinado las entradas de texto de varias líneas:

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

Los ejemplos de varias líneas que se envían con React Native en el UI Explorer deberían funcionar como se documenta.

El problema que tendrá es que TextInput multilínea aún no funciona correctamente y los documentos son engañosos. Consulte este problema de Github:

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

"Aún no hemos adaptado esa funcionalidad a código abierto".

Hay un código en ese número que brinda una funcionalidad mínima de varias líneas, por lo que es posible que pueda hacer que funcione con eso.

Funcionó para mí (RN 0.61.5):

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

En caso de que esté buscando un código:

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

Descubrí por inspector de elementos, que para iOS hay un paddingTop: 5for multiline TextInputs. Esto todavía se aplicó a pesar de que configuré paddingVertical: 15todas mis entradas. El resultado fue un texto no centrado en entradas de varias líneas en iOS. La solución fue agregar adicionalmente un paddingTop: 15if the TextInputis multiliney la plataforma es iOS. Ahora no hay diferencia visual entre las entradas de una sola línea y de varias líneas en ambas plataformas, Android e iOS.

Para alinear el texto verticalmente en el centro en ambas plataformas, use:

Para uso de Android textAlignVertical: "center"

Para uso de ios justifyContent: "center"