Как правильно выровнять ввод текста в React Native?

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

Вот мой 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 в стиле TextInput textAlignVertical: 'top'. но в ios опора TextInput 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" }} />

Обновление 2015-07-03: многострочные текстовые поля теперь объединены:

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

В примерах многострочный , что корабль с React Native в проводнике UI должен работать как описано.

Проблема, с которой вы столкнетесь, заключается в том, что многострочный TextInput еще не работает правильно, а документы вводят в заблуждение. См. Эту проблему 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 TextInputs. Это все еще применялось, хотя я установил paddingVertical: 15для всех своих входов. В результате в многострочном вводе на iOS получился нецентрированный текст. Решение заключалось в том, чтобы дополнительно добавить paddingTop: 15if TextInputis multilineи платформу iOS. Теперь визуально нет разницы между однострочным и многострочным вводом на обеих платформах, Android и iOS.

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

Для использования Android textAlignVertical: "center"

Для использования на iOS justifyContent: "center"