Question

我想对用户密码的文本输入使用反应本机元素形式。我的代码在这里：

<FormLabel> Passsword </FormLabel>
<FormInput 
onChangeText - {(text) => this.setState({password: text})}
/>

我如何使他们输入的文本安全，以使没人能看到它是什么。对于textInput，它们具有secureTextEntry，但是我无法找到类似的东西来响应本机元素

Answer 1

使用TextInput的属性secureTextEntry隐藏密码字段

            <TextInput
                   .....
                    secureTextEntry={true}  
                />

此字段接受boolean值true来隐藏文本，接受false来显示文本

Answer 2

反应本机元素FormInput不支持secureTextEntry。只需添加TextInput而不是FormInput即可，如果样式正确，它们将相同并且外观相同。

Answer 3

React Native Elements输入继承来自React Native的所有本机TextInput道具：

请参阅：https://react-native-training.github.io/react-native-elements/docs/input.html#props

这很好用：

import { Input } from 'react-native-elements'

<Input placeholder="password" secureTextEntry={true} />

Answer 4

我认为FormInput确实支持secureTextEntry。作为道具传递给..

    <FormInput
      {...props}
      style={StyleSheet.flatten([
        style,
      marginTop={marginTop}
      autoCapitalize={autoCapitalize}
      autoCorrect={autoCorrect}
      secureTextEntry={true}
      ...
    />

FormInput继承了标准React Native TextInput元素随附的所有本机TextInput道具。我们在我们的项目中将FormInput与secureTextEntry一起用作道具。您可能需要查看：https://react-native-training.github.io/react-native-elements/docs/0.19.1/forms.html

Answer 5

您需要在自定义组件中添加一个道具以保护文本。

<FormLabel> Passsword </FormLabel>
<FormInput 
isSecure={true}
onChangeText - {(text) => this.setState({password: text})}
/>

在课堂上，您需要获取道具并将其传递到您的 TextInput 属性。

    <TextInput
       secureTextEntry={this.props.isSecure ? this.props.isSecure : false}  
    />

您可以从here中查看关于secureTextEntry的信息。

Answer 6

do keyboardType="default" and it will work. It worked for me.


  <TextInput
                        style={[styles.textInput]}
                        placeholder=""
                        secureTextEntry={hidePassword}
                        selectionColor={'#000'}
                        editable={true}
                        returnKeyType={'next'}
                        keyboardType="default"
                        autoFocus={false}
                        autoCapitalize={'characters'}
                        placeholderTextColor="rgb(153,153,153)"
                        onChangeText={(text) => this.onCurrentPassTextChange(text)}
                      >{currentPassword}</TextInput>

Answer 7

遇到了同样的问题，并通过将以下内容添加到 <Input /> 中解决了这个问题：

multiline={false} <------THIS
secureTextEntry={true}

secureTextEntry 不适用于每个 react-native 文档的多行输入。所以 react-native-elements 显然默认为多行输入。将 multiline 设置为 false 对我有用。

反应本机元素形成安全的文本输入

7 个答案: