2
votes

réagit native secureTextEntry ne fonctionne pas sur Android

J'essaie d'utiliser secureTextEntry react-native pour masquer mon mot de passe et confirmer les champs de mot de passe lors de l'inscription. J'utilise le composant InputBox personnalisé pour textInput. Ci-dessous mon code,

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


2 commentaires

InputBox est-il votre composant personnalisé?


oui le textInput ci-dessous est le composant textinput qui se trouve dans le code InputBox


4 Réponses :


1
votes

Je ne sais pas pourquoi cela se produit dans votre code J'ai essayé votre code, il fonctionne correctement dans mon émulateur Android. Plutôt que cela, j'ai rencontré un problème lors de la mise à jour de la propriété "color" dans le nœud d'ombre de type: AndroidTextInput. Parce que cela prend du temps pour évaluer votre

Pour cela, j'ai supprimé cette ligne autre que celle-ci son fonctionnement très bien.

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>
    );
  }
}


1 commentaires

J'ai pu résoudre mon problème en supprimant le support keyboardType . J'ai mis à jour ma question.



4
votes

multiline = {true} ou keyboardType = {'visible-password'} empêchent secureTextEntry de fonctionner.


0 commentaires

2
votes

faites keyboardType = "default" et cela fonctionnera. Cela a fonctionné pour moi.


0 commentaires

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

0 commentaires