React Native TextInput：为什么 secureEntryText 移出输入框并有省略号？

Question

我的 React Native 应用程序中有

TextInput

组件，当我为密码输入添加

secureEntryText: 'true'

时，我注意到两件事：

1）当我输入密码时，输入密码的左边缘移出并移至输入框的左侧，如下所示：

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

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

Answer 1

表单的样式可能有点奇怪。例如，当这种情况发生在我身上时，表单字段的宽度只是键入文本的宽度。你输入的越多，它就会越向左漂移：

将输入样式设置为

flex:1

不仅可以解决

secureTextEntry

消失的问题，还可以让您单击输入中的任意位置来聚焦，而不仅仅是文本。你可能会认为 React 会将这种样式作为默认 prop，但事实并非如此：

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

Answer 2

我不知道第一个问题的答案，但是一旦

TextInput

的 属性

textAlign

设置为除

'auto'

以外的任何值，省略号就不会显示。

示例：

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

Answer 3

对于 3 年后可能面临此问题的其他开发者

发生此问题是因为安全输入宽度适合您应将宽度 100% 传递给输入及其父级的内容

类似这样的：

import {View, TextInput} from 'react-native'


const App = () => {
   return (
     <View style={{width: '100%'}}>
       <TextInput style={{width: '100%'}} secureTextEntry={true} />
    </View>
  );
}