反应原生元素表单安全文本输入答案

【问题标题】：React native elements form Secure text entry反应原生元素表单安全文本输入
【发布时间】：2021-08-18 21:25:48
【问题描述】：

我想使用反应原生元素表单来输入用户密码的文本。我的代码在这里：

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

我怎样才能使他们输入的文本安全，这样没人能看到它是什么。对于 textInput 他们有 secureTextEntry 但我无法找到类似的反应原生元素

【问题讨论】：

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

标签： react-native

【解决方案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} />

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

所以我会用 TextInput 替换 FormInput？
据我所知，这是最简单和最好的方法，文本输入伴随着许多其他事件，所以.. 是的，替换并尝试，如果你找到任何击球手选项，那就去吧，不要'忘了告诉我

【解决方案3】：

React Native Elements FormInput 不支持secureTextEntry。只需添加一个 TextInput 而不是 FormInput，如果样式正确，它的工作方式和外观相同。

【讨论】：

目前它确实支持它。请参阅下面来自其他海报的答案。

【解决方案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

【讨论】：

【解决方案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。

【讨论】：

添加 isSecure = {true} 本身不起作用。当您说将 TextInput 添加到我的班级时，那将是确切的位置。我想使用 FormInput 从用户那里获取文本。
你在 FormInput 中使用什么？？
是的，你需要在TextInput中传入secureTextEntry类型。
你能在这里分享你的 FormInput 吗？所以我们可以检查一下。
让我们continue this discussion in chat。

【解决方案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>

【讨论】：

【解决方案7】：

遇到同样的问题并通过将以下内容添加到<Input /> 来解决它：

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

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

【讨论】：

【解决方案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}}
                    />

【讨论】：