153

我有一个文本输入。当用户输入文本时,我希望它显示密码点/星号 ( ****),而不是显示输入的实际文本,您通常在输入密码时在应用程序中看到。我怎样才能做到这一点?

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

12 回答 12

450

当被问到这个问题时,没有办法在本地进行,但是这将根据这个拉取请求在下一次同步时添加。这是拉取请求的最后一条评论 - “内部登陆,将在下一次同步时发布”

添加后,您将能够执行以下操作

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

参考

于 2015-03-30T02:29:06.463 回答
37

2018 年 5 月 react-native 版本0.55.2

这工作正常:

secureTextEntry={true}

这不再起作用了:

password={true} 
于 2018-05-12T20:08:06.940 回答
23

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

secureTextEntry={true}
于 2019-09-20T11:36:24.987 回答
13

添加

secureTextEntry={true}

要不就

secureTextEntry 

TextInput 中的属性。

工作示例:

<TextInput style={styles.input}
           placeholder="Password"
           placeholderTextColor="#9a73ef"
           returnKeyType='go'
           secureTextEntry
           autoCorrect={false}
/>
于 2018-07-08T08:59:27.983 回答
7

我不得不补充:

secureTextEntry={true}

随着

password={true}

截至 0.55

于 2018-06-11T23:19:05.193 回答
5

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' />
于 2018-12-22T20:55:51.820 回答
5

一点优点:

version = RN 0.57.7

secureTextEntry={true}

keyboardType当是"phone-pad"或时不起作用"email-address"

于 2019-01-21T11:39:46.520 回答
3

可以在官网获取示例和示例代码,如下:

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

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

于 2015-06-23T15:46:43.100 回答
3
<TextInput
  placeholderTextColor={colors.Greydark}
  placeholder={'Enter Password'}
  secureTextEntry={true} />
于 2021-03-31T07:10:47.637 回答
1

如果您添加secureTextEntry={true}但没有工作,请检查multiline={true}道具,因为如果它是真的,secureTextEntry则不起作用。

于 2021-02-15T06:41:46.107 回答
1
<TextInput 
   secureTextEntry 
   placeholder="password" placeholderTextColor="#297542" 
   autoCorrect={false} style={mystyles.inputStylee} 
/>

您可以简单地将secureTextEntry道具添加到 TextInput 并省略其值。默认情况下,它设置为 true。为了使它成为假,请执行此操作secureTextEntry={false}

于 2021-03-15T11:48:44.593 回答
0

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

于 2022-02-05T04:14:14.653 回答