react-native - React Native：我如何使用 formik 和 yup 将文本计数添加到文本输入中？

Question

我正在制作一个功能，它将上传用户的介绍。更重要的是，字符需要不超过50..

顺便说一下，我正在使用Expo这个框架，下面有一些代码，你能帮我修改一下吗..非常感谢！ AppForm.js

import React from 'react';
import { Formik } from 'formik';

function AppForm({initialValues,onSubmit,validationSchema,children}) {
    return (
        <Formik
            initialValues = {initialValues}
            onSubmit = {onSubmit}
            validationSchema={validationSchema}
        >
            {() => (
            <>
            {children}
             </>
            )}
        </Formik>
    );
}

export default AppForm;

错误消息.js

import React from 'react';
import { StyleSheet } from 'react-native'
import AppText from './AppText/AppText';

function ErrorMsg({ error,visible }) {
    if (!error || !visible) return null;
    return (
        <AppText style ={styles.error}>{error}</AppText>
    );
}
const styles = StyleSheet.create({
    error: {
        color: "red",
        fontSize : 15,
   }
})

export default ErrorMsg;

AppFormFiled.js 我不知道如何修改这个组件..

import React from 'react';
import { useFormikContext } from 'formik';
import AppTextInput from './AppTextInput';
import ErrorMsg from './ErrorMsg';

import { StyleSheet } from 'react-native'
function AppFormFlied({name,width,...otherProps}) {
    const { setFieldTouched, handleChange, errors, touched } = useFormikContext();
    return (
        <>  
            <ErrorMsg error={errors[name]} visible={touched[name]}/>
            <AppTextInput
                 onBlur ={()=>setFieldTouched(name)}
                onChangeText={handleChange(name)}
               width = {width}
                {...otherProps}
                        />
            
            
        </>
    );
}
const styles = StyleSheet.create({
    
})
export default AppFormFlied;

用户介绍.js

import React from 'react';
import { StyleSheet, View } from 'react-native'
import AppForm from '../components/AppForm';
import * as Yup from 'yup';
import AppFormFlied from '../components/AppFormFlied';
import AppFormFliedUserInfo from '../components/AppFormFliedUserInfo';
import SubmitButton from '../components/SubmitButton';

function UserIntro(props) {
    const validationSchema = Yup.object().shape({
        intro : Yup.string().min(0).max(50).label("intro"),
    })
    return (
        <ScrollView contentContainerStyle={styles.out_container}>

        <View style={styles.container}>
            <AppForm
            initialValues = {{intro:''}}
            onSubmit = {values =>console.log(values)}
            validationSchema = {validationSchema}
            >
            
            {/**User intro */}
            <View style={styles.second_container}>
            <AppFormFlied
             autoCapitalize="none"
             autoCorrect={false}
             name="intro"
             placeholder="Introduction.."
             number={50} // I have no idea how to add this into the props..
            />
             
          <SubmitButton title='save'style={styles.btn} />
            </View>
            </AppForm>
        </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    
    btn :{
        marginTop : 20,
    },
   
})
export default UserIntro;

标签： react-native