React Native TextInput：为啥secureEntryText会移出输入框并带有省略号？

Posted 2023-04-18

【中文标题】React Native TextInput：为啥secureEntryText会移出输入框并带有省略号？

【英文标题】：React Native TextInput: why does secureEntryText shift outside of input box and have ellipsis?React Native TextInput：为什么secureEntryText会移出输入框并带有省略号？

【发布时间】：2020-09-05 17:53:13

【问题描述】：

我的 React Native 应用程序中有 TextInput 组件，当我为密码输入添加 secureEntryText: 'true' 时，我注意到两件事：

1) 当我输入密码时，输入密码的左边缘移到输入框的左侧，如下所示：

2）当我取消关注密码输入时，无论密码多长，输入的密码末尾都有一个省略号，如下所示：

有谁知道我该如何解决这些问题？

【参考方案1】：

我不知道第一个问题的答案，但是一旦TextInput 的property textAlign 设置为除'auto' 之外的任何值，省略号就不会显示。

例子：

<TextInput secureTextEntry=true textAlign='center' />

【参考方案2】：

表单的样式可能有点不稳定。例如，当我遇到这种情况时，表单域的宽度只有输入文本的宽度。你输入的越多，它就越会向左漂移：

将输入样式设置为flex:1 不仅可以解决secureTextEntry 消失的问题，而且还允许您单击输入中的任意位置来聚焦，而不仅仅是文本。你会认为 react 会将这种样式作为默认道具，但它没有：

<TextInput style=flex:1></TextInput>