javascript - 如果导航到 React Native 中的其他屏幕，如何保留 formik 表单值

Question

我正在开发使用 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>

Answer 1

如果你能想象它，你就可以编程。也许这会对你 friend 有所帮助。

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

/* 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
}

现在是一个能够将 asynstorage 与 formik 结合使用的示例

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提供的钩子(Hook):useFormik()。现在，作为该 Hook 的参数，我们定义了一个具有初始状态属性的对象。

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

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