Как использовать formik из Header / navigationOptions и вызвать handleSubmit onpress HeaderRight - PullRequest
Новая
       0

Как использовать formik из Header / navigationOptions и вызвать handleSubmit onpress HeaderRight

0 голосов
/ 19 сентября 2019

цель

передать параметры навигации, чтобы получить доступ к 

onPress={props.handleSubmit}

в простом приложении Natie реагирования, внутри #EditProductScreen.js

У меня есть этоpattern 

//import
import React, { useState, useEffect, useCallback } from 'react';
...
import { Formik, ErrorMessage } from 'formik';
import * as Yup from 'yup';
...

//compnt
const EditProductScreen = props => {
...
}

//Navigation
EditProductScreen.navigationOptions = navData => {
...
};

//Style
const styles = StyleSheet.create({
  form: {
    margin: 20
  },
...
});

export default EditProductScreen;

Я видел эти проблемы и ответы, но, к сожалению, не могу найти правильный путь к тому, что мне нужно, здесь проблема и здесь ответ jaredpalmer

Эта ссылка также может быть очень близка к целевому шаблону , однако в этом примере не были добавлены навигационные опции

У меня серьезная проблема (причина не может понятьНастройка NavigationOption с помощью formik) Чтобы использовать трюк, вы предоставите здесь скриншот, который объясняет цель enter image description here

погружение в основной cmpnt и навигацию

#cpnt

const EditProductScreen = props => {
   //some code 
   ...

  return (
    <ScrollView>
      <Formik
        initialValues={{ title: title, email: '' }}
        validationSchema={Yup.object({
          title: Yup.string()
            .min(2, 'Too Short!')
            .max(50, 'Too Long!')
            .required('Required')
        })}
        onSubmit={(values, formikActions) => {
          submitHandler();
        }}
      >
        {props => (
          <View>
            <View style={styles.form}>
              <View style={styles.formControl}>
                <Text style={styles.label}>Title</Text>
                <TextInput
                  // some code
                />

              // some code

              </View>
            </View>
            <Button
              title={'submit'}
              onPress={props.handleSubmit}
              color='black'
              mode='contained'
              loading={props.isSubmitting}
              disabled={props.isSubmitting}
              style={{ marginTop: 16 }}
            >
              Submit
            </Button>
          </View>
        )}
      </Formik>
    </ScrollView>
  );
};

#navigation

EditProductScreen.navigationOptions = navData => {
  const submitFn = navData.navigation.getParam('submit');
  return {
    headerTitle: navData.navigation.getParam('productId')
      ? 'Edit Product'
      : 'Add Product',
    headerRight: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title='Save'
          iconName={
            Platform.OS === 'android' ? 'md-checkmark' : 'ios-checkmark'
          }
          onPress={submitFn}
          // here the challenge 

        />
      </HeaderButtons>
    )
  };
};

и вот я здесь, я пытаюсь создать что-то подобное внутри

что я думаю

создать useEffect

 useEffect(() => {
        navigation.setParams({ handleSubmit: handleSubmit.bind() });
    }, []);

и вызывать его из навигации ... но как вообще вызвать handleSubMIT в этом использованииEffect?Как серьезно определить handleSubmit раньше, чтобы использовать его внутри useEffect?

допустим, мне удалось создать этот useEffect

, а затем вызвать его из навигации 

EditProductScreen.navigationOptions = navData => {
const submitForValidation = navData.navigation.getParam('handleSubmit');
// some code 
    headerRight: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          // some code 
          onPress={submitForValidation}
        />
      </HeaderButtons>
    )
}

Я перекусил для своего текущего кода, если он поможет мне. Закусочная

1 Ответ

0 голосов
/ 20 сентября 2019

Раньше я сталкивался с той же проблемой и придумал обходной путь ниже.

Сначала удалите эту строку 

    useEffect(() => {
        navigation.setParams({ handleSubmit: handleSubmit.bind() });
    }, []);

Второй, установитессылка на заголовок от детей Formik отрисовывает 

const EditProductScreen = props => {
    //some code 
    ...

return (
    <ScrollView>
        <Formik
            initialValues={{ title: title, email: '' }}
            validationSchema={Yup.object({
                title: Yup.string()
                    .min(2, 'Too Short!')
                    .max(50, 'Too Long!')
                    .required('Required')
            })}
            onSubmit={(values, formikActions) => {
                submitHandler();
            }}
        >
            {props => {

                // ***************************************
                // ADDED THIS LINE TO PASS PARAM TO HEADER
                // ***************************************
                navigation.setParams({ handleSubmit: props.handleSubmit });

                return (
                    <View>
                        <View style={styles.form}>
                            <View style={styles.formControl}>
                                <Text style={styles.label}>Title</Text>
                                <TextInput
   ..... the rest

Я думаю, что может быть другое лучшее решение, например, передача ссылки Formik или что вам нужно узнать больше

...