Forms React Native-如何验证Textinput的正确性？

如何验证Textinput的正确性？我想通过自定义表单验证正确验证表单，验证后在文本组件中显示错误，但如何验证？请大家给我举个例子

安装响应本机snackbar以显示错误消息

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

import React，{Component}来自'React'；
从“react native”导入{View，Text，TextInput}；
从“react native Snackbar”导入Snackbar；
导出默认类LoginPasswordScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
密码：“”
}
}
验证=（）=>{
//在if条件中包含您的验证
如果（this.state.password==“”）{
() => {
设置超时（（）=>{
Snackbar.show({
标题：“无效的Credintials”，
背景颜色：红色，
})
}, 1000);
}
}
否则{
键盘；
//导航到下一个屏幕
}
}
render（）{
返回(
this.setState（{password}）}
/>
下一个
);
}
}

每个字段，都必须进行比较并显示错误消息，正如我看到的，即使react native中有表单组件可用，也没有直接的表单验证。 在我的一个react原生项目中，我添加了一个表单，然后单击Submit，我编写了一个验证函数来检查所有输入。 为此，我使用了一个很好的javascript库-

---

对于显示错误消息，您可以使用Toast、ALert或Snackbar

如果您提供一些想法或代码，说明如何处理错误消息，那就太好了。但我的方法非常简单，在我的组件状态下，我得到了以下对象：

this.state = {
        loading: false,
        username: {
            text: '',
            valid: false
        },
        password: {
            text: '',
            valid: false
        },
        isLoginValid: false
    };

然后在用户名的文本输入上，我首先将其值绑定到

this.state.username.text

，而且，在onChangeText期间，我只需对字段进行简单的验证，如果表单很大，您可能会有一个

开关（fieldtype）

用于每个字段，您希望应用什么样的处理方法即验证

onChangeText={（text）=>{this.validateInput（text，'username'）}}

（username将是状态对象上的表单输入）

---

例如，对于用户名，您只希望是长度！=0和长度您可以提供一些您尝试的代码吗？

validateInput(text, fieldname) {
    let stateObject = {
        text: text,
        valid: text.length !== 0
    }

    this.setState({ [fieldname]: stateObject }, () => {
        this.checkValidation();
    });
}