我有一个文本输入。当用户输入文本时,我希望它显示密码点/星号 ( ****
),而不是显示输入的实际文本,您通常在输入密码时在应用程序中看到。我怎样才能做到这一点?
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={(text) => this.setState({input: text})}
/>
我有一个文本输入。当用户输入文本时,我希望它显示密码点/星号 ( ****
),而不是显示输入的实际文本,您通常在输入密码时在应用程序中看到。我怎样才能做到这一点?
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={(text) => this.setState({input: text})}
/>
2018 年 5 月 react-native 版本0.55.2
这工作正常:
secureTextEntry={true}
这不再起作用了:
password={true}
只需将下面的行添加到<TextInput>
secureTextEntry={true}
添加
secureTextEntry={true}
要不就
secureTextEntry
TextInput 中的属性。
工作示例:
<TextInput style={styles.input}
placeholder="Password"
placeholderTextColor="#9a73ef"
returnKeyType='go'
secureTextEntry
autoCorrect={false}
/>
我不得不补充:
secureTextEntry={true}
随着
password={true}
截至 0.55
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' />
一点优点:
version = RN 0.57.7
secureTextEntry={true}
keyboardType
当是"phone-pad"
或时不起作用"email-address"
可以在官网获取示例和示例代码,如下:
<TextInput password={true} style={styles.default} value="abc" />
参考: http: //facebook.github.io/react-native/docs/textinput.html
<TextInput
placeholderTextColor={colors.Greydark}
placeholder={'Enter Password'}
secureTextEntry={true} />
如果您添加secureTextEntry={true}
但没有工作,请检查multiline={true}
道具,因为如果它是真的,secureTextEntry
则不起作用。
<TextInput
secureTextEntry
placeholder="password" placeholderTextColor="#297542"
autoCorrect={false} style={mystyles.inputStylee}
/>
您可以简单地将secureTextEntry
道具添加到 TextInput 并省略其值。默认情况下,它设置为 true。为了使它成为假,请执行此操作secureTextEntry={false}
<TextInput
placeholder="Password"
secureTextEntry={true}
style={styles.input}
onChangeText={setPassword}
value={password}
/>