ReactNative 进阶之Form表单组件封装

最新推荐文章于 2025-06-04 17:40:04 发布

Vincent8080

最新推荐文章于 2025-06-04 17:40:04 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： ui

原文链接：https://juejin.im/post/5b915664e51d450e4d2f966f

本文介绍如何在React Native中封装Form表单组件，以提高开发效率。组件支持多种表单元素如TextInput、DatePicker等，并提供自定义配置。通过简单的配置文件，可以快速实现登录注册、身份认证等页面。详细使用方式见项目源码OneM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Native封装Form表单组件

为什么我们在移动端开发中急需要一个完善的Form表单组件尼？做过移动端开发的小伙伴们应该都清楚，一个完整的App项目中避免不了要有登录注册功能，用户信息，密码等一系列需要新用户填写信息的页面，这些页面的UI如果都是按部就班的去绘制，其实是做了很多无用功，因为大部分UI都长的差不多，就是有些文案类的略微不同，既然这样，我们将这些长的差不多的UI抽离成组件，在需要用到的地方，直接调用封装好的组件，这样极大的降低了编写代码量，大大的提高开发者的效率

Form表单支持的可配置项

TextInput
TextArea
Button
ButtonGroup
CheckBox
Radio
Switch
DatePicker
CustomView
Selector
CustomAction

后续待添加的配置项

地区选择
CustomSelector
用户图像
图片上传
短信验证码
登录注册
待补充

效果图

主要功能

后期完成登录注册、身份认证等表单信息页面的开发，我们只需要一个简单的配置文件即可搞定，不必每次相同的表单项都重新绘制一遍UI。对于哪些不常见的表单项，我们可以完全使用自定义UI来搞定，这样一来，我们在平时开发中的80%的表单需求都能轻松的搞定了

核心代码

renderFields(fields) {

    let fieldCount = fields.length ? fields.length : 0

    return fields.map((field, index) => {

      let isLastField = true
      if (fieldCount === index + 1 || fields[index + 1].title !== undefined) {
        isLastField = false
      }

      if (field.title !== undefined && field.show !== false) {
        return this.renderGroupForm(field)
      } else {
        let {show, type, label, subLabel, subTitle, ...other} = field
        let otherProps = {...other}
        Object.keys(otherProps).map((key, index) => {
          if (key.indexOf('on') === 0 || key === 'callback' || key === 'dataFunc' || key === 'view') {
            otherProps[key] = this.props[otherProps[key]]
          }
        })

        let isEditable = !this.props.readOnly && !this._isReadOnly(field.readOnly)

        if (show !== false) {
          if (this.fieldsType[type]) {
            if (type === 'TextInput') {
              return (
                <View
                  key={index}
                  style={[styles.row, !isLastField ? {borderBottomWidth: 1, borderBottomColor: commonStyle.lineColor} : null]}
                >
                  <View style={[styles.content, isLastField ? styles.lastLine : null]}>
                    {
                      label ?
                        <View style={styles.leftPanel}>
                          <View style={styles.leftTitle}>
                            <Text style={
   
   {fontSize: 15, color: commonStyle.textBlockColor}}>{label}</Text>
                            <Text style={
   
   {fontSize: 20, color: commonStyle.red}}>{subLabel}</Text>
                          </View>
                          {
                            subTitle ?
                              <View style={styles.subTitle}>
                                <Text style={
   
   {fontSize: 12, color: commonStyle.textGrayColor}}>{subTitle}</Text>
                              </View> : null
                          }
                        </View> : null
                    }
                    <View sty