Unform在React Native中的使用指南

Unform在React Native中的使用指南

unform Performance-focused API for React forms 🚀 项目地址: https://gitcode.com/gh_mirrors/un/unform

前言

Unform是一个优秀的表单管理库，它简化了表单状态管理和验证流程。本文将详细介绍如何在React Native应用中使用Unform来构建高效的表单系统。

React Native与Web版的区别

Unform在Web和移动端的API几乎相同，但React Native环境下有一些特殊注意事项：

1. 使用TextInput替代Web中的<input>
2. 表单提交需要手动触发，因为React Native没有原生的提交按钮
3. 需要通过特殊方式处理非受控组件

输入组件实现

在React Native中创建与Unform兼容的输入组件需要一些特殊处理：

import React, { useRef, useEffect, useCallback } from 'react';
import { Text, TextInput } from 'react-native';
import { useField } from '@unform/core';

function Input({ name, label, onChangeText, ...rest }) {
  const inputRef = useRef(null);
  const { fieldName, registerField, defaultValue, error } = useField(name);

  // 初始化默认值
  useEffect(() => {
    inputRef.current.value = defaultValue;
  }, [defaultValue]);

  // 注册字段到Unform
  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      getValue() {
        return inputRef.current?.value || '';
      },
      setValue(ref, value) {
        if (inputRef.current) {
          inputRef.current.setNativeProps({ text: value });
          inputRef.current.value = value;
        }
      },
      clearValue() {
        if (inputRef.current) {
          inputRef.current.setNativeProps({ text: '' });
          inputRef.current.value = '';
        }
      },
    });
  }, [fieldName, registerField]);

  // 处理文本变化
  const handleChangeText = useCallback(
    text => {
      if (inputRef.current) inputRef.current.value = text;
      onChangeText?.(text);
    },
    [onChangeText],
  );

  return (
    <>
      {label && <Text>{label}</Text>}
      <TextInput
        ref={inputRef}
        onChangeText={handleChangeText}
        defaultValue={defaultValue}
        {...rest}
      />
    </>
  );
}

export default Input;

关键点解析

1. 引用管理：使用useRef创建对TextInput的引用
2. 字段注册：通过useField和registerField将组件注册到Unform
3. 值同步：使用setNativeProps确保原生视图与JavaScript状态同步
4. 非受控模式：通过ref存储值而非组件状态

表单组件实现

React Native中的表单提交需要手动触发：

import React, { useRef } from 'react';
import { Button } from 'react-native';
import { Form } from '@unform/mobile';
import Input from './components/Input';

export default function SignIn() {
  const formRef = useRef(null);

  function handleSubmit(data) {
    console.log(data);
    // 输出示例: { email: 'test@example.com', password: '123456' }
  }

  return (
    <Form ref={formRef} onSubmit={handleSubmit}>
      <Input name="email" type="email" />
      <Input name="password" type="password" />

      <Button 
        title="Sign in" 
        onPress={() => formRef.current.submitForm()} 
      />
    </Form>
  );
}

表单特点

1. 手动提交：通过调用formRef.current.submitForm()触发提交
2. 数据收集：Unform自动收集所有已注册字段的值
3. 统一处理：所有字段值通过handleSubmit函数统一处理

最佳实践建议

1. 表单验证：可以在handleSubmit中添加验证逻辑
2. 错误处理：利用useField返回的error属性显示验证错误
3. 性能优化：对于复杂表单，考虑使用React.memo优化输入组件
4. 自定义输入：上述模式可以扩展到其他自定义输入组件

总结

Unform为React Native提供了简洁高效的表单管理方案。通过本文介绍的方法，开发者可以轻松实现：

• 非受控表单组件
• 统一表单状态管理
• 灵活的表单提交控制
• 可扩展的输入组件体系

掌握这些核心概念后，你可以根据项目需求进一步扩展和定制表单功能。

unform Performance-focused API for React forms 🚀 项目地址: https://gitcode.com/gh_mirrors/un/unform