npm 包 @activatortube/react-native-form 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们常常需要使用到表单组件来收集并提交用户的输入信息。React Native 作为跨平台的移动端开发框架，也有一些表单组件可供选择，如 react-native-form, react-native-form-generator 等等。而今天我们要介绍的是一个新的表单组件—— @activatortube/react-native-form。

这个组件具有良好的可扩展性和定制化能力，具有输入校验和异步表单提交等特点。我们将在本文中详细介绍该组件的使用方法和API。

安装

在使用 @activatortube/react-native-form 组件前，需要在你的 React Native 项目中先安装该包。可以使用 npm 或 yarn 进行安装。

npm install @activatortube/react-native-form

或者

yarn add @activatortube/react-native-form

使用方法

在你的 React Native 项目中引入组件并创建表单，示例如下：

-- -------------------- ---- -------
------ ---- ---- -----------------------------------

----- ------ ------- --------- -
  ------------- -
    --------
    ---------- - -
      --------- --
    --
  -

  ---------------------------
    ----------------------------------
    ---------- --------------------- ---------- ---------- --------- --------
  -

  ---------------
    ----- ---------- - -----------
    ----------------------------
  -

  -------- -
    ------ -
      -----
        ----------
        -------------------------------------------
        ---------------------------------------
        -
        ---------------
          ---------------
          -----------
          --------------------
          ---------------
          --

        ---------------
          ---------------
          ----------
          -------------------
          ---------------
          ---------------
          --
        -- --
        ------------
          -------------
          -----------
          ---------------
          ---------------- ---- ------ -- -
            --------------------- ----- ---- ------
          --
          --
        -- --
        ------------
          ------------
          ------------
          ----------------------- -------- ------ ---------
          --
      -------
      ------- ----------- -- ------------------------ ------------
    --
  -
-

在上述代码中，我们创建了一个表单，其中包含两个 TextInput 组件。在 handleFormChange 函数中，我们每次在输入框内输入内容时都能获取到输入框内容，将其存储在组件状态中以进行表单提交。当点击表单的提交按钮时，触发 handleSubmit 函数进行表单校验和提交操作。

API 和配置项

以下是 @activatortube/react-native-form 组件提供的 API 和配置项列表。

Form 组件

Form 组件是所有表单组件的容器，用于组合成一个完整的表单。同时也实现了表单数据的绑定、表单校验等功能，API 和配置项如下：

注意：如果是 Form 组件需要注意ref，Button 调用Form组件方法前请确保已被渲染

ref: 用于获取 Form 组件的引用，需要确保是唯一的。

-- -------------------- ---- -------
  -- ---
  -------- -
    ------ -
      ----- -----------
        -- ---
      -------
      ------- ----------- -- ------------------------ ------------
    --
  -

onChange function

当表单上的任一输入框的值发生改变时，Form 组件调用 onChange 函数并传递 formData 对象作为参数。当表单发生任何变化时都会被自动触发。

  handleFormChange(formData){
    this.setState({formData:formData})
  }

onSubmit function

当用户提交表单时，Form 组件调用 onSubmit 函数。在这个函数中，你应该校验表单数据的有效性，并将表单数据提交到服务器。

 handleSubmit(){
    const {formData} = this.state;
    //校验表单，做一些提交前的处理，如异步提交数据到服务器
    console.log(formData);
  }

Input 组件

Form 组件中的 TextInput、Select、Switch 等都是继承自 Input 的组件，Input 继承自 TextInput 组件，提供了一些额外的配置项和 API，API 和配置项如下：

name string

指定表单控件的属性名称，该名称将作为 formData 对象的属性名。

  <Form.TextInput
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    required={true}
  />

label string

指定表单控件的标签名称，显示在表单控件之前。

  <Form.TextInput
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    required={true}
  />

placeholder string

指定表单控件中的默认值。

  <Form.TextInput
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    required={true}
  />

required bool

指定表单控件是否必填。

  <Form.TextInput
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    required={true}
  />

keyboardType string

指定表单控件的输入类型，如 numeric、email-address 等。

  <Form.TextInput
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    keyboardType="email-address"
    required={true}
  />

autoCapitalize string

指定文本框的大小写规则，如 none（不自动转换）、sentences（每个句子的首字母大写）、words（每个单词的首字母大写）等。

  <Form.TextInput
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    autoCapitalize="sentences"
    required={true}
  />

password bool

指定文本框的类型是否为密码类型，用于隐藏用户的输入内容。

  <Form.TextInput
    name="password"
    label="密码"
    placeholder="请输入密码"
    password={true}
    required={true}
  />

selectTextOnFocus bool

指定文本框是否在获得焦点时全选内容。默认值为 false。

  <Form.TextInput
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    selectTextOnFocus={true}
    required={true}
  />

autoCorrect bool

指定文本框是否根据用户输入自动修正。

  <Form.TextInput
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    autoCorrect={true}
    required={true}
  />

onFocus function

指定文本框获得焦点时执行的回调函数。

  <Form.TextInput
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    onFocus={() => console.log('Focused')}
    required={true}
  />

onBlur function

指定文本框失去焦点时执行的回调函数。

  <Form.TextInput
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    clearButtonMode="always"
    onBlur={() => console.log('Blurred')}
    required={true}
  />

Switch 组件

Switch 组件是一个开关按钮，用于表示一个布尔值。当用户点击开关按钮时，Switch 组件调用 onChange 函数并传递参数。

name string

指定表单控件的属性名称，该名称将作为 formData 对象的属性名。

  <Form.Switch
    name="rememberMe"
    label="记住登录状态"
  />

label string

指定表单控件的标签名称，显示在表单控件之前。

  <Form.Switch
    name="rememberMe"
    label="记住登录状态"
  />

buttonRadius number

指定开关按钮的圆角大小。

  <Form.Switch
    name="rememberMe"
    label="记住登录状态"
    buttonRadius={10}
  />

changeValueImmediately bool

指定开关按钮是否在触摸时立即修改其值。默认值为 false。

  <Form.Switch
    name="rememberMe"
    label="记住登录状态"
    changeValueImmediately={true}
  />

buttonSize number

指定开关按钮的大小。

  <Form.Switch
    name="rememberMe"
    label="记住登录状态"
    buttonSize={15}
  />

buttonOuterSize number

指定开关按钮外围的大小。

  <Form.Switch
    name="rememberMe"
    label="记住登录状态"
    buttonOuterSize={50}
  />

switchWidthMultiplier number

指定开关按钮的宽度。默认值为 1.8。

  <Form.Switch
    name="rememberMe"
    label="记住登录状态"
    switchWidthMultiplier={2}
  />

switchHeightMultiplier number

指定开关按钮的高度。默认值为 1.2。

  <Form.Switch
    name="rememberMe"
    label="记住登录状态"
    switchHeightMultiplier={2}
  />

value bool

指定开关按钮的值。如果为真，开关按钮将为激活状态。默认为 false。

  <Form.Switch
    name="rememberMe"
    label="记住登录状态"
    value={true}
  />

onChange function

当开关按钮的值发生改变时，Switch 组件调用 onChange 函数并传递 value 作为参数。

  <Form.Switch
    name="rememberMe"
    label="记住登录状态"
    onChange={(form, key, value) => {
      console.log('switch changed', form, key, value);
    }}
  />

Picker 组件

Picker 是一个可以拉出下拉框来选择框中的内容。

name string

指定表单控件的属性名称，该名称将作为 formData 对象的属性名。

  <Form.Picker
    name="topic"
    label="话题选择"
    options={['Javascript', 'React', 'React Native']}
  />

label string

指定表单控件的标签名称，显示在表单控件之前。

  <Form.Picker
    name="topic"
    label="话题选择"
    options={['Javascript', 'React', 'React Native']}
  />

options array

指定表单控件的可选项，默认值为空数组。数组中每个元素都是一个对象，对象包含 value 和 label 两个属性。

-- -------------------- ---- -------
  ------------
    ------------
    ------------
    ----------
      - ------ ----- ------ ------------ --
      - ------ -------- ------ ------- --
      - ------ --------------- ------ ------ ------- --
    --
  --

selectedValue string|number

指定表单控件的默认值。

-- -------------------- ---- -------
  ------------
    ------------
    ------------
    ----------
      - ------ ----- ------ ------------ --
      - ------ -------- ------ ------- --
      - ------ --------------- ------ ------ ------- --
    --
    ---------------------
  --

onValueChange function

当选择值发生更改时，Picker 组件调用 onValueChange 函数并传递值作为参数。

-- -------------------- ---- -------
  ------------
    ------------
    ------------
    ----------
      - ------ ----- ------ ------------ --
      - ------ -------- ------ ------- --
      - ------ --------------- ------ ------ ------- --
    --
    --------------------- ---- ------ -- -
      ------------------- ----- --------- ----- ---- -------
    --
  --

总结

@activatortube/react-native-form 是一个功能强大、易于使用的 React Native 表单组件。经过本文的介绍，相信你已经掌握了该组件的使用方法和 API。在实际开发中，你可以根据自己的需求来灵活运用它，实现各种类型的表单功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/137057