Як правильно вирівняти введення тексту в рідній реакції?

Введення тексту вирівняно по центру, як виправити це введення тексту так, щоб воно вводило текст з верхнього лівого кута

Ось мій css для введення тексту

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

У мене була та сама проблема, але наведені вище примітки не вирішили її. Існує властивість стилю лише для Android,textAlignVertical яка вирішує цю проблему на багаторядкових входах.

тобто textAlignVertical: 'top'

TextInput має заповнення за замовчуванням, замініть його, встановивши:

paddingTop: 0,
paddingBottom: 0

Випуск Github

Я знайшов рішення, яке в Android textAlignVertical: 'top'працює у стилі TextInput . але в iOS функція TextInput prop multiline={true}працює.

У мене був подібний варіант використання в моїй програмі для iOS, де TextInputзріст становив 100, а заповнювач відображався посередині. Я використовував, multiline={true}і це змусило текст з’являтися зверху. Сподіваюся, це допомагає.

Дайте, textAlignVertical : "top"що вирішить вашу проблему.

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

Оновлення 03.07.2015: багаторядкові введення тексту об’єднано:

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

У прикладах багатостроковий , що корабель з React Native в провіднику UI повинен працювати як описано.

Проблема, яку ви матимете, полягає в тому, що багаторядковий ввід тексту ще не працює належним чином, а документи вводять в оману. Будь ласка, перегляньте цю проблему Github:

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

"Ми ще не перенесли цю функцію у відкритий код."

У цьому випуску є деякий код, який надає мінімальну багаторядкову функціональність, тож ви можете змусити його працювати з цим.

Мені це вдалося (RN 0,61,5):

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

Просто, якщо ви шукаєте код:

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

Я з'ясував, що за інспектором елементів, що для iOS існує paddingTop: 5for multiline TextInput. Це все ще застосовувалось, хоча я встановив paddingVertical: 15для всіх своїх входів. Результатом став нецентрований текст у багаторядкових введеннях на iOS. Рішенням було додатково додати paddingTop: 15if, якщо TextInputє multilineі платформа iOS. Зараз візуально немає різниці між однорядковими та багаторядковими входами на обох платформах, Android та iOS.

Щоб вирівняти текст вертикально по центру на обох платформах, використовуйте:

Для використання на Android textAlignVertical: "center"

Для використання ios justifyContent: "center"