如何正确对齐文本输入？

Question

文本输入是居中对齐的，如何修复此文本输入以便从左上角输入

这是我的文本输入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
}

Answer 1

我有同样的问题，但上面的说明没有解决它。有一个仅限机器人样式属性textAlignVertical可以解决多线输入问题。

即。 textAlignVertical: 'top'

Answer 2

我发现在Android中，TextInput样式textAlignVertical: 'top'可以解决此问题。但在ios中，TextInput属性multiline={true}可以工作。

Answer 3

2015-07-03更新：多行文字输入现已合并：

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

UI Explorer中附带React Native的multiline examples应该按照文档记录的方式工作。

您将遇到的问题是多行TextInput尚未正常工作，并且文档具有误导性。请看这个Github问题：

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

  

“我们尚未将该功能移植到开源。”

该问题中有一些代码可以提供最少的多行功能，因此您可以使用该代码。

Answer 4

我在iOS应用中有一个类似的用例，其中TextInput的高度为100，占位符显示在中间。我使用了multiline={true}，它使文本从顶部出现。希望有帮助。

Answer 5

上述答案提供了适用于 iOS 或 android 的版本，这可能会产生误导，因此这对两个平台都进行了修复。

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

对于安卓 -

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

对于iOS，添加 multiline={true} 到 <TextInput/> 组件

Answer 6

TextInput具有默认的填充，请通过设置覆盖它：

paddingTop: 0,
paddingBottom: 0

Github Issue

Answer 7

给予textAlignVertical : "top"可以解决您的问题。

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

Answer 8

它对我有用（RN 0.61.5）：

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

Answer 9

只是在您要查找代码的情况下：

<TextInput
placeholder={'comment goes here!'}
multiline
style={{textAlignVertical:'top', ...otherStyle}}
/>

Answer 10

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

Answer 11

我发现每个元素检查器都知道，对于iOS，paddingTop: 5 multiline有一个TextInput。即使我为所有输入都设置了paddingVertical: 15，该设置仍然适用。结果是iOS上多行输入中的文本未居中。解决方案是，如果paddingTop: 15为TextInput并且平台为iOS，则另外添加一个multiline。 现在，在Android和iOS两种平台上，单行和多行输入在视觉上都没有区别。

Answer 12

我认为这是iOS的默认设置，对于我来说，在Android上将paddingVertical: 0,添加到文本样式中是可行的。

Answer 13

显然，iOS 的解决方案并不像人们想象的那么简单。

而在 Android 上，您可以添加此样式：

paddingTop: 0,
paddingBottom: 0,

在 iOS 上你需要这个：

multiline={true}

但是如果您想要单行怎么办？这是我的解决方法：

<TextInput
   value={comment}
   onChangeText={setComment}
   {/*The lines below are the important ones*/}
   multiline={true}
   blurOnSubmit={true}
   autoCorrect={false}
   onSubmitEditing={handleOnSubmit}
/>

让我解释一下这里发生了什么：

1. 正如我们所说，multiline={true} 垂直对齐文本。
2. 为避免在按下提交按钮后添加新行，您需要 blurOnSubmit={true}。这也会关闭键盘，虽然在我的情况下这没关系，但不幸的是，我还没有找到解决方法。
3. 我使用了 autoCorrect={false}，因为没有它，提交按钮会将 TextInput 的值更改为自动选择的建议（如果有）。
4. 最后，如果您想在按下提交按钮时执行某些操作，那么您需要 onSubmitEditing={handleOnSubmit}。

对齐文本的旅程真是太棒了...

Answer 14

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

对于android，请使用textAlignVertical: "center"

对于ios，请使用justifyContent: "center"