如何在 React Native 中正确对齐文本输入？

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

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

"We haven't ported that functionality to open source yet."

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

Answer 2

我遇到了同样的问题，但是上面的注释并没有解决。有一个 android-only 样式属性 textAlignVertical 修复了多行输入的这个问题。

即textAlignVertical: 'top'

Answer 3

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

Answer 4

我找到了 Android 中 TextInput 样式 textAlignVertical: 'top' 有效的解决方案。但在 ios 中，TextInput 属性 multiline={true} 有效。

Answer 5

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

对于 android 使用 textAlignVertical: "center"

对于 ios 使用 justifyContent: "center"

Answer 6

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

paddingTop: 0,
paddingBottom: 0

Github Issue

Answer 7

如果您正在寻找代码：

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

Answer 8

给出 textAlignVertical : "top" 即可解决您的问题。

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

Answer 9

它对我有用（RN 0.61.5）：

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

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 TextInputs。即使我为所有输入设置了 paddingVertical: 15，这仍然适用。结果是 iOS 上的多行输入中的文本未居中。如果 TextInput 是 multiline 并且平台是 iOS，则解决方案是另外添加一个 paddingTop: 15。现在，Android 和 iOS.

这两个平台上的单行和多行输入在视觉上没有区别

Answer 12

我认为它是 iOS 的默认值，android 在我的例子中添加 paddingVertical: 0, 到文本样式是有效的。

Answer 13

以上答案给出了 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}
/>

对于Android-

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

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

Answer 14

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

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

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

仅仅对齐文本是一段怎样的旅程...

如何在 React Native 中正确对齐文本输入？

How to align text input correctly in react native?

javascript

ios

reactjs

react-native