如何在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

UI资源管理器中随React Native一起提供的多行示例应按记录工作。

您将遇到的问题是多行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 TextInput。即使我paddingVertical: 15为所有输入进行了设置，该方法仍然适用。结果是iOS上多行输入中的文本未居中。解决的办法是另外增加一个paddingTop: 15，如果TextInput是multiline和平台的iOS。现在，在两种平台（Android和iOS）上的单行输入和多行输入在视觉上都没有区别。

要使文本在两个平台上垂直居中对齐，请使用：

供Android使用 textAlignVertical: "center"

供ios使用 justifyContent: "center"