如果在React Native中导航到其他屏幕，如何保持Formik表单值

如何解决如果在React Native中导航到其他屏幕，如何保持Formik表单值

我正在使用Formik表单的应用程序上工作，它可以正常工作，但是当我打开相机并在取回丢失的表单时拍照时会遇到一个问题。如果要打开相机等，我想保留所有值。我真的很努力，但是没有找到任何解决方案。有人可以帮我解决这个问题。

谢谢

    <Form
      initialValues={{ username: "",email: '' }}
      onSubmit={handleSubmit}
      key={Math.random()}
    >
    
      <FormField
        autoCapitalize="none"
        autoCorrect={false}
        icon="account"
        keyboardType="email-address"
        name="username"
        placeholder="Username"
        textContentType="emailAddress"
        maxLength={20}
        style={{ width: "100%" }}
      />
    
      <ListItemSeparator />
    
      <View style={{ marginVertical: 20 }}>
        <>
          <MaterialCommunityIcons name="camera" size={40} color="#666" onPress={() => cameraToggle(true)} />
    
          <Image resizeMode="cover" source={{ uri: camerBinaryImage && camerBinaryImage.uri }} style={{ height: Object.keys(camerBinaryImage).length > 0 ? 300 : 0,width: Object.keys(camerBinaryImage).length > 0 ? 300 : 0 }} />
        </>
      </View>
    
    
      <ListItemSeparator />
      <AppText style={styles.slugTitle}>Email</AppText>
    
      <ListItemSeparator />
      <FormField
        autoCapitalize="none"
        autoCorrect={false}
        keyboardType="email-address"
        comment={true}
        name="email"
        placeholder="Email"
        textContentType="emailAddress"
        style={{ width: "100%" }}
      />
    
    </Form>

解决方法

如果你能想象，你就可以编程。也许这会帮助你的朋友。

您必须先安装 asynstorage。现在创建一个名为 useAsyncStorage.js 的钩子并添加以下代码

/* Librarys*/
import AsyncStorage from '@react-native-async-storage/async-storage';

const storeData = async (key,value) => {
  try {
    return await AsyncStorage.setItem(key,value);
  } catch (error) {
    console.log(error)
  }
},getData = async (key) => {
    try {
      let data = await AsyncStorage.getItem(key);
      return key !== null ? data : null;
    } catch (error) {
      console.log(error)
    }
  },/* JSON */
  storeDataJson = async (key,value) => {
    try {
      const jsonValue = JSON.stringify(value)
      await AsyncStorage.setItem(key,jsonValue)
    } catch (err) {
      console.log(err);
    }
  },getDataJson = async key => {
    try {
      const jsonValue = await AsyncStorage.getItem(key);
      return jsonValue !== null ? JSON.parse(jsonValue) : null;
    } catch (err) {
      console.log(err);
    }
  }

module.exports = {
  storeData,getData,storeDataJson,getDataJson
}

现在是一个能够在 formik 中使用 asynstorage 的示例

import React,{ useEffect } from 'react';
import { TextInput } from 'react-native';
import { Formik,useFormik } from 'formik';

/* AsyncStorage */
import { storeData,getData } from './useAsyncStorage'; // your path

const CustomComponent = () => {

  const initialValues = useFormik({
    initialValues: {
      name: 'Husdady'
    }
  })

  useEffect(() => {
    getData('keyname').then(savedValue => {
      console.log(savedValue)
      savedValue && initialValues.setFieldValue('name',savedValue);
    })
  },[]);

  return (
    <Formik
      initialValues={initialValues.values}
      enableReinitialize>
      {({ values,setFieldValue }) => {
        const { name } = values;
        console.log(values)
        return <TextInput
          value={name}
          placeholder="write something..."
          onChangeText={e => {
            setFieldValue('name',e);
            storeData('keyname',e);
          }}
        />
      }
      }
    </Formik>
  )
}

export default CustomComponent

首先我们要使用formik提供的钩子：useFormik()。现在作为该钩子的参数，我们定义了一个具有初始状态属性的对象。

我们还会用到useEffect钩子，当组件被渲染时，我们使用useAsyncStorage钩子的getData函数来获取异步存储中存储的值，然后我们使用setFieldValue方法来改变属性的值在第一个参数中设置，在第二个参数中我们更改异步存储中的值。

对不起，如果我的英语不好。我会说西班牙语，我正在使用翻译器