在React Native中使用react-redux-form的完整指南-CSDN博客

在React Native中使用react-redux-form的完整指南

前言

react-redux-form是一个强大的表单状态管理库，它能够完美地与Redux集成，为React应用提供高效的表单处理方案。本文将重点介绍如何在React Native项目中使用react-redux-form，帮助开发者构建高效、可维护的移动端表单。

基础使用

要在React Native中使用react-redux-form，首先需要从特定路径导入组件：

import { Control } from 'react-redux-form/native';

基础示例展示了如何在React Native中使用TextInput控件：

import React, { View } from 'react-native';
import { Control } from 'react-redux-form/native';

class App extends React.Component {
  render() {
    return (
      <View>
        <Control.TextInput model="user.name" />
      </View>
    );
  }
}

export default App;

支持的Native控件

react-redux-form为React Native提供了多种预映射的表单控件：

基本输入控件
- Control.TextInput：文本输入框
- Control.Switch：开关控件
- Control.Slider：滑动条（注意：SliderIOS已废弃）
选择器控件
- Control.Picker：选择器
- Control.DatePickerIOS：iOS日期选择器
- Control.SegmentedControlIOS：iOS分段控制器
- Control.SegmentedControlAndroid：Android分段控制器
特殊控件
- Control.MapView：地图视图
- Control.DatePickerAndroid：Android日期选择器（函数包装器）

特殊控件详解

1. Control.DatePickerAndroid

这是一个对原生Android日期选择器的封装，使用方式与iOS版本不同：

const MyDatePicker = Control.DatePickerAndroid({
    date: new Date(),
    mode: 'calendar',
});

// 使用时
try {
    const { dismissed, year, month, day } = await MyDatePicker.open();
    
    if (!dismissed) {
        const date = `${day}/${month}/${year}`;
        dispatch(setChosenDate({ date }));
    }
} catch (err) {
    console.log('日期选择出错');
}

2. Control.SegmentedControlAndroid

这个组件封装了第三方库react-native-segmented-control-tab，提供了完整的属性支持。

表单组件

<Form>组件在React Native中默认渲染为<View>，它处理表单验证和子控件模型，但不包含原生的提交机制。

<Form model="user" onSubmit={(vals) => console.log(vals)}>
  <Control.TextInput model=".firstName" />
  <Control.TextInput model=".lastName" />
  <Button onPress={() => dispatch(actions.submit('user'))} />
</Form>

错误处理

<Errors>组件默认使用<View>作为包装器，每个错误项使用<Text>渲染：

<Errors
  model="user.email"
  wrapper={View}
  component={Text}
/>

高级用法

1. 使用Picker控件

<Control.Picker model=".gender">
  <Picker.Item label="Male" value="male" />
  <Picker.Item label="Female" value="female" />
</Control.Picker>

2. 自定义表单组件

对于第三方组件，可以通过component属性指定：

<Control.TextInput
  model=".last_name"
  component={Input}  // 来自native-base等UI库
/>

3. 非标准组件的集成

对于不遵循标准API的组件，需要手动映射属性：

<Control
  component={CustomPicker}
  mapProps={{
    onResponderGrant: ({ onFocus }) => onFocus,
    selectedValue: ({ modelValue }) => modelValue,
    onValueChange: ({ onChange }) => onChange,
  }}
  model=".relationship"
/>