React Native多行TextInput文字垂直居中,如何设置文字从顶部开始显示?
React Native多行TextInput文字从顶部显示解决方案
要实现多行输入框文字从顶部开始排版,只需修改两处配置即可:
- 给
TextInput的样式添加textAlignVertical: 'top'属性,该属性用于控制输入框内文本的垂直对齐方式,显式指定为顶部对齐后,占位符和输入内容都会从输入框顶部开始排列 - 将
numberOfLines属性从1改为匹配输入框高度的数值(高度100的情况下建议设置为4~5即可),设置为1会影响多行模式的默认排版逻辑
修改后完整代码如下:
<View style={{flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 50}}> <AntDesign name="infocirlceo" size={24} style={{backgroundColor: '#fff', padding: 10, borderRadius: 100, marginRight: 12}} color="#555" /> <TextInput style={{ padding: 10, height: 100, backgroundColor: '#fff', borderWidth: 1, width: 250, borderRadius: 8, borderColor: '#eee', textAlignVertical: 'top' }} placeholder="Proudktbeschreibung eingeben" multiline numberOfLines={4} /> </View>
内容的提问来源于stack exchange,提问作者Datastores11
相关产品推荐
相关产品推荐

