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",
4 Réponses :
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> ); } }
J'ai pu résoudre mon problème en supprimant le support keyboardType
. J'ai mis à jour ma question.
multiline = {true} ou keyboardType = {'visible-password'} empêchent secureTextEntry de fonctionner.
faites keyboardType = "default"
et cela fonctionnera. Cela a fonctionné pour moi.
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>
InputBox est-il votre composant personnalisé?
oui le textInput ci-dessous est le composant textinput qui se trouve dans le code
InputBox