react-навигация 5 и отправка дескриптора Formik не работают

#reactjs #react-native #formik #react-navigation-v5

#reactjs #react-native #formik #react-navigation-v5

Вопрос:

Я следовал этому примеру в документах react-navigation, и handleSubmit из формы Formik в основном onPress={handleSubmit} не обрабатывается.

 React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => <Button onPress={handleSubmit} title='Update' />,
    });
  }, [navigation]);

  const handleSubmit = (values: IUser) => {
    setLoadingVisible(true);
    updateAccountDetails(values);
    setUser(values);
  };
 
  <Form
          initialValues={{
            id: user.id,
            name: user.name,
            email: user.email,
            address: user.address,
          }}
          onSubmit={handleSubmit}
          validationSchema={accountDetailsValidationSchema}
        >
 

Ответ №1:

В <Form/> react-native formik нет компонента https://formik.org/docs/guides/react-native#the-gist

также вы можете добавить компонент button с layoutEffect в отдельный компонент в качестве дочернего элемента

  <Formik
  initialValues={{ email: '' }}
  onSubmit={handleSubmit}>
  {({ handleChange, handleBlur, handleSubmit, values }) => (
   <View>
     <TextInput
       onChangeText={handleChange('email')}
       onBlur={handleBlur('email')}
       value={values.email}
     />
     <HeaderButton onSubmit={handleSubmit} navigation={navigation}/>
   </View>
 )}
 

добавьте эффект компоновки к <HeaderButton/>

 const HeaderButton = ({ handleSubmit, navigation }) => {
  React.useLayoutEffect(() => {
   navigation.setOptions({
     headerRight: () => <Button onPress={handleSubmit} title='Update' />,
     });
  }, [navigation, handleSubmit]);

   return (<></>);

}