如何正确对齐文本输入的反应本地？

文本输入是中心对齐的，如何修复这个文本输入，使其从左上角接受输入

The Text input is center aligned, how to fix this text input so that it takes input from top left corner

这是我的文本输入的 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
}
116196 次浏览
小开

更新2015-07-03: 多行文本输入现已合并:

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

在 UI 资源管理器中附带 ReactNative0的 多行示例应该按照文档说明的方式工作。

您将遇到的问题是多行 TextInput 还没有正确工作，而且文档具有误导性。请看这个 Github 问题:

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

“我们还没有把这个功能移植到开源中。”

这个问题中有一些代码提供了最小的多行功能，所以您可以使用它来工作。

小开
最佳答案

我也有同样的问题，但是上面的笔记并没有解决它。有一个 机器人专用样式的属性 textAlignVertical可以修复多行输入上的这个问题。

即 textAlignVertical: 'top'

小开

我在我的 iOS 应用程序中有一个类似的用例，其中 TextInput的高度是100，占位符显示在中间。我使用 multiline={true}，它使文本显示从顶部。希望能帮上忙。

小开

I have found the solution that in Android, TextInput style textAlignVertical: 'top' works. but in ios, TextInput prop multiline={true} works.

小开

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

对于机器人使用 textAlignVertical: "center"

Ios 使用 justifyContent: "center"

小开

TextInput 具有默认填充，通过设置:

paddingTop: 0,
paddingBottom: 0

Github 问题

小开

只是以防你正在寻找代码:

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

给 textAlignVertical : "top"将解决你的问题。

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

这对我很有效(RN 0.61.5) :

<TextInput style=\{\{textAlignVertical:'top', paddingTop: 0, paddingBottom:0 }} />
小开 
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: 5对于 multiline TextInput。即使我为所有输入设置了 paddingVertical: 15，这仍然适用。结果是在 iOS 的多行输入中没有居中的文本。解决方案是，如果 TextInput是 multiline，而平台是 iOS，则另外添加一个 paddingTop: 15。 现在，在 Android 和 iOS 这两个平台上，单行和多行输入在视觉上没有区别。

小开

我认为这是 iOS 的默认设置，在我的案例中，android 将 paddingVertical: 0,添加到文本样式中是有效的。

小开

上面的答案要么是 for 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}
/>

For Android -

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

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

小开

显然，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}。

排列一篇文章真是一段奇妙的旅程。


提交答案