反应本机secureTextEntry在android上不起作用

Posted 2023-04-18

【中文标题】反应本机secureTextEntry在android上不起作用

【英文标题】：react native secureTextEntry not working on android

【发布时间】：2019-07-08 03:35:59

【问题描述】：

我正在尝试使用 react-native secureTextEntry 隐藏我的密码并在注册期间确认密码字段。我正在为 textInput 使用自定义 InputBox 组件。下面是我的代码，

                <InputBox 
                error=this.state.PwordError 
                keyboardType='default' 
                onChangeText=Pword =>
                    this.setState(
                        Pword
                    )
                 
                secureTextEntry=true
                value=this.state.Pword 
                pHolder="Password" 
                color='white' />
            <View style=styles.spacer />
            <InputBox 
                error=this.state.CPwordError 
                keyboardType='default' 
                onChangeText=CPword =>
                    this.setState(
                        CPword
                    )
                 
                secureTextEntry=true
                value=this.state.CPword 
                pHolder="Confirm Password" 
                color='white' />

第一个文本框在输入密码时可以正常工作，它显示为点，但确认密码字段不起作用。有谁知道为什么会发生这种情况？

这是上面代码引用的输入框

            <TextInput 
                    underlineColorandroid="transparent"
                    placeholder=this.props.pHolder 
                    placeholderTextColor=this.props.color === 'white' ? 'black':"white"  
                    ...this.props
                    style=this.props.color == 'white' ? styles.ReginputStyle : styles.inputStyle 

                    /> 

我正在使用，

"react": "16.5.0",
"react-native": "0.57.1",

我可以通过从输入组件中删除 keyboardType='default' 代码来解决此问题。即使问题已解决，我也想知道为什么第一个 secureTextEntry 框工作而另一个没有，因为除了值之外它们都是相同的。任何人都可以说明为什么会发生这种情况，

谢谢。

【问题讨论】：

InputBox 是你的自定义组件吗？

是的，下面的 textInput 是 InputBox 代码中的 textinput 组件

【参考方案1】：

multiline=true 或keyboardType='visible-password' 阻止secureTextEntry 工作。

【参考方案2】：

做keyboardType="default"，它会起作用的。它对我有用。

【参考方案3】：

这对我有用：

secureTextEntry works if you set autoCapitalize='none'.

https://github.com/facebook/react-native/issues/30148#issuecomment-748288773

【参考方案4】：

我不知道为什么会在您的代码中发生这种情况我已经尝试过您的代码，它在我的 android 模拟器中运行良好。而不是这个，我在更新类型的阴影节点中的属性“颜色”时遇到了问题：AndroidTextInput。因为它需要时间来评估你的

为此，我删除了这一行，除此之外它工作正常。

import React,  Component  from "react";
import  View, Text, TouchableOpacity, TextInput  from "react-native";

export default class App extends Component 
  constructor(props) 
    super(props);
    this.state =  CPwordError: "", CPword: "", PwordError: "", Pword: "" ;
  

  render() 
    return (
      <View>
        <InputBox
          error=this.state.PwordError
          keyboardType="default"
          onChangeText=Pword =>
            this.setState(
              Pword
            )
          
          secureTextEntry=true
          value=this.state.Pword
          pHolder="Password"
          // color="white"
        />

        <InputBox
          error=this.state.CPwordError
          keyboardType="default"
          onChangeText=CPword =>
            this.setState(
              CPword
            )
          
          secureTextEntry=true
          value=this.state.CPword
          pHolder="Confirm Password"
          // color="white"
        />
      </View>
    );
  


class InputBox extends Component 
  constructor(props) 
    super(props);
  

  render() 
    return (
      <View>
        <TextInput
          underlineColorAndroid="transparent"
          placeholder=this.props.pHolder
          placeholderTextColor="black"
          ...this.props
          style=this.props.color == "white"
        />
      </View>
    );
  

【讨论】：

我可以通过删除 keyboardType 属性来解决我的问题。我已经更新了我的问题。

【参考方案5】：

keyboardType="default" Working Fine.
secureTextEntry=hidePassword

  <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>