ReactNative 进阶之Form表单组件封装

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
                          }