React Native元素表单安全文本输入

Question

我想使用React Native Elements表单来让用户输入密码。我的代码如下：

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

如何使他们输入的文本安全，以便没有人可以看到它是什么。 对于textInput，他们有secureTextEntry，但我还没有找到类似的react native元素。

- paulgio

---

你可以使用这样的包 https://www.npmjs.com/package/react-native-hide-show-password-input - SGhaleb

Answer 1

React Native Elements Input继承自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} />

- Roland

Answer 2

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

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

此字段接受 true 值用于隐藏文本和false值用于显示文本。

- Jay Thummar

---

那我应该用 TextInput 替换 FormInput 吗？ - paulgio

根据我的了解，这是最简单、最容易的方法，文本输入还带有许多其他事件，所以...是的，替换并尝试，如果你找到了更好的选项，那就选择它，别忘了告诉我。 - Jay Thummar

Answer 3

React Native Elements FormInput不支持secureTextEntry。只需添加一个TextInput而不是FormInput，如果正确设置样式，它将起到相同的作用并且看起来也一样。

- paulgiordan

---

目前它支持。请看下面来自其他用户的答案。 - Diosney

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

- AmolR

Answer 5

你需要在自定义组件中添加一个属性来保护文本。

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

在您的类中，您需要获取props并将其传递到 TextInput 属性中。

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

你可以在这里了解有关secureTextEntry的信息。

- Nirmalsinh Rathod

---

你在FormInput中使用了什么？ - Nirmalsinh Rathod

是的，你需要在TextInput中传递secureTextEntry类型。 - Nirmalsinh Rathod

你能在这里分享一下你的表单输入吗？这样我们就可以检查。 - Nirmalsinh Rathod

<FormInput onChangeText={(text) => this.setState({password: text})} isSecure={true} <TextInput secureTextEntry={this.props.isSecure ? this.props.isSecure : false} /> /> - paulgio

让我们在聊天中继续这个讨论。 - Nirmalsinh Rathod

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>

- Keshav Gera

Answer 7

我曾经遇到过同样的问题，通过在 <Input /> 中添加以下内容解决了它：

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

根据React Native文档，secureTextEntry不支持多行输入。因此，React Native Elements默认使用多行输入。将multiline设置为false对我有用。

- James Brett

Answer 8

通过使用这段代码，您可以保护输入字段。

<TextInput
                   secureTextEntry={true}
                   placeholder = "Enter your password"
                   autoCorrect={false}
                    style={{ height: 44, width: '92%', marginTop: 20, borderColor: 'gray', borderWidth: 1, paddingLeft: 15, borderRadius: 7}}
                    />

- V.Kumar