你如何设计一个 TextInput in react native 来输入密码

Question

我有一个 TextInput。当用户输入文本时，我希望它显示密码点/星号 (****)，而不是显示输入的实际文本，您通常会在输入密码时在应用程序中看到这些密码。我该怎么做？

<TextInput
  style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
  onChangeText={(text) => this.setState({input: text})}
/>

Answer 1

当有人问到这个问题时，没有办法在本地执行此操作，但是这将根据 this 拉取请求在下一次同步时添加。这是对拉取请求的最后评论 - "Landed internally, will be out on the next sync"

添加后您将可以执行类似的操作

<TextInput secureTextEntry={true} style={styles.default} value="abc" />

refs

Answer 2

示例和示例代码可以在官网获取，如下：

<TextInput password={true} style={styles.default} value="abc" />

参考：http://facebook.github.io/react-native/docs/textinput.html

Answer 3

2018 年 5 月 反应本机版本 0.55.2

这很好用：

secureTextEntry={true}

这不再有效了：

password={true}

Answer 4

我不得不补充：

secureTextEntry={true}

与

一起

password={true}

截至 0.55

Answer 5

添加

secureTextEntry={true}

或者只是

secureTextEntry

属性在您的 TextInput 中。

工作示例：

<TextInput style={styles.input}
           placeholder="Password"
           placeholderTextColor="#9a73ef"
           returnKeyType='go'
           secureTextEntry
           autoCorrect={false}
/>

Answer 6

TextInput 必须包含 secureTextEntry={true}，请注意 React 的文档指出您不能同时使用 multiline={true}，因为不支持该组合。

您还可以设置 textContentType={'password'} 以允许该字段从存储在您手机上的钥匙串中检索凭据，这是一种输入凭据的替代方法，如果您的手机上有生物识别输入可以快速插入证书。例如 iPhone X 上的 FaceId 或其他 iPhone 型号和 Android 上的指纹触摸输入。

 <TextInput value={this.state.password} textContentType={'password'} multiline={false} secureTextEntry={true} onChangeText={(text) => { this._savePassword(text); this.setState({ password: text }); }} style={styles.input} placeholder='Github password' />

Answer 7

一点加分：

version = RN 0.57.7

secureTextEntry={true}

在 keyboardType 为 "phone-pad" 或 "email-address"

时不起作用

Answer 8

只需将下面的行添加到 <TextInput>

secureTextEntry={true}

Answer 9

如果您添加了 secureTextEntry={true} 但没有起作用，请检查 multiline={true} 属性，因为如果它是 true，则 secureTextEntry 不起作用。

Answer 10

<TextInput 
   secureTextEntry 
   placeholder="password" placeholderTextColor="#297542" 
   autoCorrect={false} style={mystyles.inputStylee} 
/>

您只需将 secureTextEntry 属性添加到 TextInput 并省略其值即可。默认情况下，它设置为 true。要使其为 false，请执行此操作 secureTextEntry={false}

Answer 11

<TextInput
  placeholderTextColor={colors.Greydark}
  placeholder={'Enter Password'}
  secureTextEntry={true} />

Answer 12

 <TextInput
        placeholder="Password"
        secureTextEntry={true}
        style={styles.input}
        onChangeText={setPassword}
        value={password}
      />

你如何设计一个 TextInput in react native 来输入密码

How do you style a TextInput in react native for password input

react-native