文本输入垂直对齐

Posted 2023-03-15

【中文标题】文本输入垂直对齐

【英文标题】：TextInput Vertical Aligment

【发布时间】：2018-04-27 14:17:54

【问题描述】：

有人知道如何使用自定义字体（内容和占位符）修复 TextInput 的垂直对齐吗？我尝试了所有这些：

justifyContent：“中心”， alignItems：“居中”， textAlign: '居中', textAlignVertical：'居中'，

没有任何作用！有什么建议吗？

           <TextInput
            ref=ref => this.emailField = ref
            placeholder="E-Mail"
            style=styles.loginInput
            placeholderStyle=styles.loginInput
            editable=true
            maxLength=40
            autoCorrect=false
            selectionColor="#9D9D9D"
            placeholderTextColor="#9D9D9D"
            autoCapitalize="none"
            keyboardType="email-address"
            returnKeyType="next"
            keyboardAppearance="dark"
            textAlign="center"
            underlineColorandroid="transparent"
            onSubmitEditing=() => this.passwordField.focus()
            value=this.state.email
            onChangeText=(text) => this.setState( email: text )
          />

  loginInput: 
    width: '70%',
    height: 40,
    marginBottom: 8,
    backgroundColor: '#dbdbdb',
    fontFamily: 'Neuzeit Grotesk Regular',
    fontSize: 18,
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    textAlignVertical: 'center',
  ,

【问题讨论】：

你试过 lineHeight 吗？

你能添加代码吗，到目前为止你做了什么？

我已经添加了代码！ @PritishVaidya

按照@bennygenel 的建议，您应该尝试使用lineHeight

@PritishVaidya 没有得到可接受的结果！你有吗？

【参考方案1】：

我遇到了同样的问题。 TextInput 有一个默认的填充， 就我而言。我在TextInput 样式中添加了paddingTop: 0、paddingBottom: 0。

【参考方案2】：

请尝试删除marginBottom