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

【问题标题】：react native secureTextEntry not working on android反应本机secureTextEntry在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 组件

标签： android react-native 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>

【讨论】：