如何在本机react中正确对齐文本输入？

IT技术 javascript ios reactjs react-native
2021-04-21 18:37:45

文本输入居中对齐，如何修复此文本输入以使其从左上角输入

文本输入居中对齐，如何修复此文本输入以使其从左上角输入

这是我用于文本输入的 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
}
6个回答

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

IE textAlignVertical: 'top'

ios是默认解决的还是这个修复只适用于android？
2021-06-01 18:37:45
太棒了，解决了multiline={true}android 中的 TextInput 对齐问题。
2021-06-01 18:37:45
@dev_ter 它仅适用于 android。我认为iOS 在默认情况下是顶部对齐的，尽管自从我使用 RN 以来已经有一段时间了，所以实际上还没有确认。不确定您是否/如何进行中间对齐，但如果您发现如何对齐，请随时做笔记或编辑！
2021-06-07 18:37:45
也在 iOS 上工作
2021-06-10 18:37:45
如果textAlignVertical 仅适用于Android，如何接受答案？
2021-06-18 18:37:45

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

paddingTop: 0,
paddingBottom: 0

Github 问题

那是我的问题。此外，根据文档， textAlignVertical 不是道具
2021-06-10 18:37:45

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

@AliMertCakarnumberOfLines={1}不能一起工作multiline={true}。按键盘上的 Enter 键，您会看到它更改了行。
2021-05-24 18:37:45
@Georgios 将 numberOfLines 设置为 1？
2021-05-26 18:37:45
我不明白人们multiline={true}对 iOS 上的“解决方案”有多满意。我到处都看到这个建议，但是如果我想要一个垂直对齐的单行输入怎么办？
2021-06-02 18:37:45

以上答案要么给出了 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/>组件

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

<TextInput placeholder="Your text post" multiline={true} numberOfLines={10}, maxLength={1000} style={{ borderWidth: 1, backgroundColor: "#e3e3e3", textAlignVertical : "top" }} />
其它你可能感兴趣的问题
上一篇lit-element 和 React 之间的主要区别 下一篇如何在 react-router 2.0.0-rc5 中获取当前路由