如何正确对齐文本输入？
Vik*_*tya 67 javascript ios reactjs 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
}
小智 146
我有同样的问题,但上面的说明没有解决它.有一个仅限android的样式属性textAlignVertical可以解决多线输入上的这个问题.
即 textAlignVertical: 'top'
- 太棒了,用android中的`multiline = {true}`解决了TextInput对齐问题. (5认同)
- 如果`textAlignVertical`仅适用于Android,如何接受答案？ (3认同)
- ios 是默认解决的还是此修复仅适用于 android ？ (2认同)
- @dev_ter它只是android-only.我认为*iOS默认情况下是顶级对齐的,虽然已经有一段时间了,因为我已经使用过RN,所以还没有真正确认.不确定是否/如何中间对齐,但如果你发现如何,可以随意做笔记或编辑! (2认同)
小智 23
上面的答案要么给出了 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/>组件
ase*_*eel 10
我找到了在Android中TextInput样式textAlignVertical: 'top'有效的解决方案。但在ios中，TextInput属性multiline={true}有效。
TextInput具有默认的填充，请通过设置覆盖它：
paddingTop: 0,
paddingBottom: 0
- @shoopi 是的，但它记录在 [multiline](https://reactnative.dev/docs/textinput#multiline) 属性下。 (2认同)
小智 5
给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 }} />
| 归档时间： |
|
| 查看次数： |
43881 次 |
| 最近记录： |