如何从StackNavigator提交表格？

Question

我想要让Button在StackNavigator中提交Formik表单。有什么好的选择可以做到而又不会损失性能并使我的yup验证正常工作吗？我设法通过了传递状态，但是应用运行速度非常慢，是的，遗憾的是它无法正常运行。这是我的componenet的代码。如果有人以前解决过这样的问题，我会很高兴。 ：）

import { Formik } from 'formik';
import React, { useState, useEffect } from 'react';
import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
import * as Yup from 'yup';
import Button from '../../_layout/Button';
import Input from '../../_layout/Input';
import { box, color, font, typography, hitSlop } from '../../../assets/global';
import { CheckIcon } from '../../../assets/icons';
import { withNavigation } from 'react-navigation';
import PropTypes from 'prop-types';

const Note = ({ navigation }) => {
    const { textAreaContainer, textArea } = styles;

    const onSubmit = (values, actions) => {
        console.log(values);
        navigation.goBack();
    };

    const validationSchema = Yup.object().shape({
        header: Yup.string()
            .required('')
            .min(3, ''),
        text: Yup.string()
            .required('')
            .min(5, ''),
    });

    return (
        <Formik
            initialValues={{ header: '', text: '' }}
            onSubmit={onSubmit}
            validationSchema={validationSchema}
            validateOnChange={true}
        >
            {({
                handleChange,
                handleSubmit,
                handleBlur,
                values,
                errors,
                isValid,
                touched,
            }) => (
                <View style={textAreaContainer}>
                    <StatusBar barStyle="light-content" />
                    <Input
                        name="header"
                        onChangeText={handleChange('header')}
                        placeholder="Wprowadz tytuł"
                        type="outlined"
                        onBlur={handleBlur('header')}
                        containerStyle={{ marginBottom: 0 }}
                        value={values.header}
                        error={errors.header}
                        touched={touched.header}
                        displayTitle={false}
                    />
                    <Input
                        onChangeText={handleChange('text')}
                        placeholder="Wprowadź tekst"
                        type="outlined"
                        onBlur={handleBlur('text')}
                        style={textArea}
                        numberOfLines={10}
                        multiline={true}
                        value={values.text}
                        error={errors.text}
                        touched={touched.text}
                        displayTitle={false}
                    />

                    <Button title="test" onPress={handleSubmit} />
                </View>
            )}
        </Formik>
    );
};

Note.propTypes = {
    navigation: PropTypes.object.isRequired,
};

Note.navigationOptions = ({ navigation }) => ({
    headerTitle: 'Notatka',
    headerRight: (
        <TouchableOpacity
            onPress={() => {
                console.log('SUBMIT FORMIK HERE!!!!!!!!!!!!!!!!!!!');
            }}
            hitSlop={hitSlop()}
        >
            <CheckIcon
                style={{ marginRight: box }}
                width={25}
                height={25}
                stroke={color.white}
            />
        </TouchableOpacity>
    ),
});

export default withNavigation(Note);

const styles = StyleSheet.create({
    textAreaContainer: {
        padding: box,
    },
    textArea: {
        padding: box,
        marginBottom: 10,
        height: 150,
        textAlignVertical: 'top',
        ...typography(color.black, font.S),
        borderColor: color.lightGray,
        borderWidth: 1,
        borderRadius: 5,
    },
});

Answer 1

您可以按照以下方式从反应导航标题按钮调用函数：

1. [创建一个使用导航中的setParams的效果。在其中定义一个功能，例如onPress，您可以定义每个要在按下按钮时运行的功能。

 useEffect(() => {
    setParams({
      onPress: () => {
        validateForm(); // example
        submitForm(); // example
      },
    });
  }, []);

2. 您需要在标题中使用onPress函数

Note.navigationOptions = ({ navigation }) => ({
    headerTitle: 'Notatka',
    headerRight: (
        <TouchableOpacity
            onPress={() => {
              const onPress = navigation.getParam("onPress"); // get param onPress
              if (onPress) onPress();
            }}
            hitSlop={hitSlop()}
        >
            <CheckIcon
                style={{ marginRight: box }}
                width={25}
                height={25}
                stroke={color.white}
            />
        </TouchableOpacity>
    ),
});