React native 如何使用Formik在headerRight中启动函数？

我对react native和formik是个新手，我遇到了这个问题，我正试图建立这个问题

如何使用Formik在headerRight中启动函数？我有一个updateCorporation函数，该函数将执行FireAPI，formik将在我按下Update按钮后执行该函数，但结果未定义 我不明白为什么会这样

文件_1.js

const CorporationContainer = (props) => {
    const {
    navigation,
} = props;

const updateCorporation = (values) => {
    // do patch stuff with values
    // but its undefined
};

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

return (
    <Corporation
        updateCorporation={updateCorporation} />
    );
};

CorporationContainer.navigationOptions = ({ navigation }) => ({
    headerRight: (
        <EditBtn
        onPress={() => navigation.state.params.updateCorporation()}
        >
        <EditText>Update</EditText>
        </EditBtn>
    ),
});

export default CorporationContainer;

const CorporationContainer=（道具）=>{
常数{
航行
}=道具；
const updateCorporation=（值）=>{
//用值做补丁
//但它没有定义
};
useffect（（）=>{
setParams（{updateCorporation:updateCorporation.bind（）}）；
}, []);
返回(
);
};
CorporationContainer.navigationOptions=（{navigation}）=>({
头灯：(
navigation.state.params.updateCorporation（）}
>
更新
),
});
导出默认CorporationContainer；

文件2.js

const Corporation = (props) => {
    const {
        updateCorporation,
    } = props;

    const emailField = useRef(null);

    const validationSchema = yup.object().shape({
        email: yup.string()
        .ensure()
        .email('Email must be valid')
        .required('Email'),
    });

    return (
        <Formik
            initialValues={{
                email,
            }}
            onSubmit={values => updateCorporation(values)}
            validateOnBlur={false}
            validateOnChange={false}
            validationSchema={validationSchema}
            >
        {(formProps) => {
            const {
            errors,
            setFieldValue,
            values,
            } = formProps;
            return (
                <Container>
                    <Input
                        name="email"
                        placeholder="Email Corporation"
                        textContentType="emailAddress"
                        keyboardType="email-address"
                        returnKeyType="done"
                        autoCapitalize="none"
                        autoCorrect={false}
                        ref={emailField}
                        value={values.email}
                        onChangeText={setFieldValue}
                        editable={!email}
                        error={errors.email}}
                    />
                </Container>
            );
        }}
        </Formik>
    );
};

export default Corporation;

const Corporation=（道具）=>{
常数{
更新公司，
}=道具；
const emailField=useRef（null）；
const validationSchema=yup.object（）.shape({
电子邮件：yup.string（）
.确保
.email（'电子邮件必须有效'）
.必填（“电子邮件”），
});
返回(
更新公司（值）}
validateOnBlur={false}
validateOnChange={false}
validationSchema={validationSchema}
>
{（formProps）=>{
常数{
错误，
setFieldValue，
价值观
}=formProps；
返回(
);
}}
);
};
出口违约公司；

这里是Formik作者

我还没有尝试过这个，我知道导航绑定是如何工作的，但是您希望将Formik的

submitForm（）

prop绑定到导航，而不是

updateCorporation

函数。但是，如果您有权访问Formik道具/上下文（即作为

的孩子），则需要执行此操作

从“React”导入React
从'formik'导入{connect}
const updateCorporation=（值）=>{
//用值做补丁
//但它没有定义
};
const BindSubmit=connect（{formik，navigation}）=>{
useffect（（）=>{
setParams（{updateCorporation:submitForm.bind（）}）；
}, []);
返回空
})
// ... 然后在Formik下的某个地方渲染
康斯特公司=（）=>{
返回(
{/*…相同的*/}
)
}

在文件_1.js中，我不得不使用

和表单

删除文件_2.js中的所有Formik内容，并使用道具

const CorporationContainer = (props) => {
    const {
        navigation,
        handleSubmit,
        errors,
        setFieldValue,
        values,
    } = props;

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

    return (
        <ProfileProfessional
        errors={errors}
        setFieldValue={setFieldValue}
        values={values}
        />
    );
};

CorporationContainer.navigationOptions = ({ navigation }) => ({
headerRight: (
    <EditBtn
    onPress={() => navigation.state.params.updateCorporation()}
    >
    <EditText>Editar</EditText>
    </EditBtn>
),
});

export default withFormik({
    // ...
})(CorporationContainer);

const CorporationContainer=（道具）=>{
常数{
航行
手推，
错误，
setFieldValue，
价值观
}=道具；
useffect（（）=>{
setParams（{updateCorporation:handleSubmit.bind（）}）；
}, []);
返回(
);
};
CorporationContainer.navigationOptions=（{navigation}）=>({
头灯：(
navigation.state.params.updateCorporation（）}
>
编辑
),
});
使用Formik导出默认值({
// ...
})（公司集装箱）；

我找到的最好的解决方案是使用FORMIK实现更高的顺序。@fsi您是否有一个包含任何动态导航选项标题按钮的FORMIK示例？因为我只是在这里打开我关闭问题嗨，可以在文件中看到所有需要的依赖项

const CorporationContainer = (props) => {
    const {
        navigation,
        handleSubmit,
        errors,
        setFieldValue,
        values,
    } = props;

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

    return (
        <ProfileProfessional
        errors={errors}
        setFieldValue={setFieldValue}
        values={values}
        />
    );
};

CorporationContainer.navigationOptions = ({ navigation }) => ({
headerRight: (
    <EditBtn
    onPress={() => navigation.state.params.updateCorporation()}
    >
    <EditText>Editar</EditText>
    </EditBtn>
),
});

export default withFormik({
    // ...
})(CorporationContainer);