如何在 React Native 中设置 TextInput 的样式以进行密码输入

Question

我有一个文本输入。当用户输入文本时，我希望它显示密码点/星号 (

****

)，而不是显示输入的实际文本，您通常在输入密码时在应用程序中看到。我该怎么做？

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

Answer 1

当被问及这个问题时，没有办法在本地执行此操作，但是这将根据 this 拉取请求在下次同步时添加。 这是对拉取请求的最后评论 - “内部落地，将在下次同步时发布”

添加后，您将能够执行类似的操作

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

参考文献

Answer 2

2018 年 5 月 反应本机版本0.55.2

这很好用：

secureTextEntry={true}

这不再起作用了：

password={true} 

Answer 3

只需将下面的行添加到

<TextInput>

secureTextEntry={true}

Answer 4

添加

secureTextEntry={true}

或者只是

secureTextEntry 

TextInput 中的属性。

工作示例：

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

Answer 5

您需要将 secureTextEntry 属性设置为 true，为了获得更好的用户体验，您可以使用 眼睛图标 显示实际密码

 import {TextInput, Card} from 'react-native-paper';
 const [hidePass, setHidePass] = useState(true);

 const [password, setPassword] = useState('');


<TextInput
            
            label="Password"
            outlineColor="black"
            activeOutlineColor="#326A81"
            autoCapitalize="none"
            returnKeyType="next"
            mode="outlined"
            secureTextEntry={hidePass ? true : false}
            selectionColor="#326A81"
            blurOnSubmit={false}
            onChangeText={password => updateState({password})}
            right={
              <TextInput.Icon
                name="eye"
                onPress={() => setHidePass(!hidePass)}
              />
            }
          />

Answer 6

我必须补充：

secureTextEntry={true}

与

一起

password={true}

截至 0.55

Answer 7

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 8

一点补充：

version = RN 0.57.7

secureTextEntry={true}

当

keyboardType

 为 

"phone-pad"

 或 

"email-address" 时，

不起作用

Answer 9

如果您添加了

secureTextEntry={true}

但不起作用，请检查

multiline={true}

属性，因为如果它为 true，则

secureTextEntry

不起作用。

Answer 10

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

Answer 11

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

Answer 12

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

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

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

Answer 13

您需要将

secureTextEntry

属性设置为 true

<TextInput
  placeholder="Re-enter password"
  style={styles.input}
  secureTextEntry={true}
  value={confirmPsw}
  onChangeText={setconfirmPsw}
/>

Answer 14

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

您可以简单地将

secureTextEntry

属性添加到 TextInput 并省略其值。默认情况下，它设置为 true。要使其变为 false，请执行以下操作

secureTextEntry={false}

Answer 15

const [password, setPassword] = useState('');  
const [passwordVisibility, setPasswordVisibility] = useState(true);  
const [rightIcon, setRightIcon] = useState('eye');  
const [rightIconColor, setRightIconColor] = useState('#0C8A7B');

 const handlePasswordVisibility = () => {  
        if (rightIcon === 'eye') {  
            setRightIcon('eye-slash');  
            //setRightIconColor('#FF0000')  
            setPasswordVisibility(!passwordVisibility);  
        } else if (rightIcon === 'eye-slash') {  
            setRightIcon('eye');  
            //setRightIconColor('#0C8A7B')
            setPasswordVisibility(!passwordVisibility);  
        }  
    };  
 <TextInput  
     style={{
        height: 45,  
        margin: 12,  
        padding: 10,  
        backgroundColor: 'white',  
        borderRadius: 10  
    }}  
   name="password"  
   placeholder="Enter password"  
   autoCapitalize="none"  
   autoCorrect={false}  
   secureTextEntry={passwordVisibility}  
   value={password}  
   enablesReturnKeyAutomatically  
   onChangeText={text => setPassword(text)}  
  />

  <TouchableOpacity
      onPress={handlePasswordVisibility}>
  <Icon name={rightIcon} size={25} color={rightIconColor} />
  </TouchableOpacity>
</View>


**I Hope this will help you**

Answer 16

secureTextEntry={true}

为我工作。