javascript - 如何将错误/验证文本移动到输入框的底部？

Question

目前，我的 react native 应用程序中有一个屏幕设置，用于处理创建新用户。我遇到的问题是我添加的验证消息或错误消息文本一直出现在输入框的右侧，而不是在导致输入元素转移的框下方。我在 React Native 中寻找类似于 break 元素（例如 ..
）的东西，但似乎没有找到。

以下是我到目前为止的代码

const SignUpForm = () => {



    return ( <
        SafeAreaView style = {
            styles.container
        } >
        <
        Formik validationSchema = {
            signUpValidationSchema
        }
        initialValues = {
            {
                firstName: '',
                lastName: '',
                email: '',
                password: '',
                confirmPassword: '',
            }
        }
        onSubmit = {
            values => console.log(values)
        } >



        {
            ({
                handleChange,
                handleBlur,
                handleSubmit,
                values,
                errors,
                isValid
            }) => ( <
                >
                <
                View >
                <
                Text style = {
                    styles.createScrText
                } > Create Your < /Text> <
                Text style = {
                    styles.createScrText
                } > Jobs @Scale Account < /Text> <
                /View> <
                View style = {
                    styles.nameRow
                } >
                <
                TextInput
                // component={CustomInput}
                name = "firstName"
                placeholder = "First Name"
                style = {
                    styles.nameBorderL
                }
                value = {
                    values.firstName
                }
                onChangeText = {
                    handleChange('firstName')
                }
                onBlur = {
                    handleBlur('firstName')
                }
                /> {
                    errors.firstName ?
                        <
                        Text style = {
                            styles.errors
                        } > {
                            errors.firstName
                        } < /Text> : <Text></Text >
                } <
                TextInput
                // component={CustomInput}
                name = "lastName"
                placeholder = "Last Name"
                style = {
                    styles.nameBorderR
                }
                value = {
                    values.lastName
                }
                onChangeText = {
                    handleChange('lastName')
                }
                onBlur = {
                    handleBlur('lastName')
                }
                /> <
                /View> {
                    errors.lastName ?
                        <
                        Text style = {
                            styles.errors
                        } > {
                            errors.lastName
                        } < /Text> : <Text></Text >
                } <
                TextInput
                // component={CustomInput}
                name = "email"
                placeholder = "Email Address"
                keyboardType = "email-address"
                style = {
                    styles.otherFields
                }
                value = {
                    values.email
                }
                onChangeText = {
                    handleChange('email')
                }
                onBlur = {
                    handleBlur('email')
                }
                /> {
                    errors.email ?
                        <
                        Text style = {
                            styles.errors
                        } > {
                            errors.email
                        } < /Text> : <Text></Text >
                } <
                TextInput
                // component={CustomInput}
                name = "passowrd"
                placeholder = "Password"
                secureTextEntry style = {
                    styles.otherFields
                }
                value = {
                    values.password
                }
                onChangeText = {
                    handleChange('password')
                }
                onBlur = {
                    handleBlur('password')
                }
                onBlur = {
                    handleBlur('password')
                }
                /> {
                    errors.password ?
                        <
                        Text style = {
                            styles.errors
                        } > {
                            errors.password
                        } < /Text> : <Text></Text >
                } <
                TextInput
                // component={CustomInput}
                name = "confirmPassword"
                placeholder = "Confirm Password"
                secureTextEntry style = {
                    styles.otherFields
                }
                value = {
                    values.confirmPassword
                }
                onChangeText = {
                    handleChange('confirmPassword')
                }
                onBlur = {
                    handleBlur('confirmPassword')
                }
                /> {
                    errors.confirmPassword ?
                        <
                        Text style = {
                            styles.errors
                        } > {
                            errors.confirmPassword
                        } < /Text> : <Text></Text >
                }

                <
                TouchableOpacity onPress = {
                    handleSubmit
                }
                disabled = {
                    !isValid
                }
                style = {
                    styles.btn
                }
                disabled = {
                    true
                } >
                <
                Text style = {
                    styles.btnText
                } > Sign Up < /Text> <
                /TouchableOpacity> <
                />
            )
        } <
        /Formik> <
        /SafeAreaView>
    )

}


export default SignUpForm```

Please let me know if there is a workaround for this.

Also, expo will not start for some reason, so I might not be able to try suggestions till it's back up. Currently, try setting up for my Android phone though.

标签： javascriptreactjsreact-native