Réagir Natif - Comment valider la saisie de texte correctement?

Installer réacteur-natif-snackbar strong> Pour afficher des messages d'erreur.

 import React, { Component } from 'react';
    import { View, Text, TextInput } from 'react-native';
    import Snackbar from 'react-native-snackbar';

    export default class LoginPasswordScreen extends Component {
        constructor(props) {
            super(props);

            this.state = {
                password: ''
            }
        }

        validate = () => {
            //include your validation inside if condition
            if (this.state.password == "") {
                () => {
                    setTimeout(() => {
                        Snackbar.show({
                            title: 'Invalid Credintials',
                            backgroundColor: red,
                        })
                    }, 1000);
                }
            }
            else {
                Keyboard.dismiss();
                // navigate to next screen
            }
        }

        render() {
            return (
                <View>
                    <TextInput
                        returnKeyType="go"
                        secureTextEntry
                        autoCapitalize="none"
                        autoCorrect={false}
                        autoFocus={true}
                        onChangeText={(password) => this.setState({ password })}
                    />
                    <TouchableOpacity>
                        <Text onPress={this.validate}>Next</Text>
                    </TouchableOpacity>
                </View>
            );
        }
    }

Chaque champ, vous devez faire une comparaison et montrer le message d'erreur et, comme je le vois, il n'y a pas de validation de formulaire direct, même s'il existe une composante de formulaire disponible dans React Native. Dans un de mon projet natif de réact, j'ai ajouté une forme et plus tard en cliquant sur Soumettre, j'avais écrit une fonction de validation pour vérifier toutes mes entrées. Pour cela, j'ai utilisé une belle bibliothèque JavaScript- Library NPM- Validator

et pour montrer le message d'erreur, vous pouvez utiliser, griller, alerter ou snackbar

serait bien si vous fournissez des pensées ou un code sur la manière dont vous penseriez que cela peut être approché. Mais comme je l'ai fait était assez simple, sur mon état de composant, j'ai eu l'objet suivant: xxx

puis sur la TextInput pour le nom d'utilisateur, je voudrais d'abord lier sa valeur à .state.username.text , également, lors de Onchangetext, je viens de faire une simple validation du champ, si le formulaire est assez gros, vous pouvez avoir un commutateur (fieldype) où vous avez Pour chaque champ, quel traitement vous souhaitez appliquer une validation aka.

onchangetext = {(texte) => {this.validateInput (texte, "nom d'utilisateur")}} (nom d'utilisateur serait l'entrée de formulaire sur l'objet d'état)

par exemple, pour le nom d'utilisateur, vous voulez seulement être de longueur! = 0 et longueur <= 8 caractères, pour votre email, vous pouvez exécuter une réégyvette () avec l'e-mail Validation et également sa longueur, pour un mot de passe une logique différente, etc., après cela, je sauve simplement simplement l'état pour cette entrée de champ et s'il est valide ou non. Comme ceci: xxx

dans checkvalidation Je vérifie tous les champs de saisie et si chacun est valide, je définit Formvalid sur true. Ce formelid serait par exemple, permettant à l'utilisateur de toucher le bouton "Connexion", sinon elle applique une opacité de 0,5 à elle et la désactive.

Le reste que vous pouvez deviner, vient de jouer avec le variables de chaque champ à ce que vous voulez afficher et ce que vous n'êtes pas. Dans un formulaire de registre, j'ai également ajouté une icône X ou une "tick" si le champ de texte d'entrée est OK ou non. Laissez votre imagination vous guider.

espère que cela aide.