web-dev-qa-db-ja.com

Formikで値を設定する方法

私はReact Nativeで機能コンポーネントを操作しています。イメージURIをFormikの初期状態に保存したいです。

私は_pickImage関数でイメージURIを取得していますが、それをフォルミクの初期状態に渡す方法に立ち往生しています。

URI値を初期状態に設定できます。

と

他のカスタム値を機能状態からフォルミク初期状態に保存する方法がある場合

import React, { useState } from 'react';
import { View, TextInput, Picker, Text, Button } from 'react-native';
import { globalStyles } from '../styles/global'
import { Formik } from "formik";
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';

export default function form(props) {
    const { register } = props
    const getPermissionAsync = async () => {
        if (Constants.platform.ios) {
            const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
            if (status !== 'granted') {
                alert('Sorry, we need camera roll permissions to make this work!');
            }
        }
    }
    const _pickImage = async () => {
        getPermissionAsync();
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1
        });
        if (!result.cancelled) {
            console.log(result.uri)
         // Getting Image URI value here
        }
    }
    return (      
            <View >
                <Formik
                    initialValues={
                        {
                            image: '',                      
                        }}

                    onSubmit={(values, actions) => {                      
                            register(values);          
                            console.log(values);
                            actions.resetForm(); 
                    }}                    
                >
                    {
                        (formikprops) => (
                            <View>
                                <Button
                                    title="image"
                                    icon="add-a-photo" mode="contained"
                                    onPress={() => { _pickImage(formikprops.handleChange('image')) }}
                                />
                                {formikprops.values.image && formikprops.values.image.length > 0 ?
                                    <Image source={{ uri: formikprops.values.image }} style={{ width: 200, height: 200 }} /> : null}

                                <Button title="submit" color="coral" onPress={formikprops.handleSubmit} />
                            </View>
                        )
                    }
                </Formik>

            </View>

    )
}
 _
reactjsreact-nativeformik
4
Demon37

フォルミキのようにsetFieldValue関数を利用することができます

const _pickImage = async (setFieldValue, field) => {
        getPermissionAsync();
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1
        });
        if (!result.cancelled) {
            console.log(result.uri)
         // Getting Image URI value here
           setFieldValue(field, result.uri)
        }
    }

    ----

    <Button
        title="image"
        icon="add-a-photo" mode="contained"
        onPress={() => { _pickImage(formikprops.setFieldValue, 'image') }}
    />
 _
2
Shubham Khatri