资讯专栏INFORMATION COLUMN

动手封装一个React Native多级联动

Coly / 1595人阅读

摘要:如果只有用到里面非常简单的功能,很快就可以开发好,建议自己开发,没必要引用一个庞大的包,如果要特殊定制的话,就只有自己开发。

背景

肯定是最近有一个项目,需要一个二级联动功能了!
本来想封装完整之后,放在github上面赚星星,但发现市面上已经有比较成熟的了,为什么我在开发之前没去搜索一下(项目很赶进度),泪崩啊,既然已经封装就来说说过程吧

任务开始 一. 原型图或设计图

在封装一个组件之前,首先你要知道组件长什么样子,大概的轮廓要了解

二. 构思结构

在封装之前,先在脑海里面想一下

1. 这个组件需要达到的功能是什么?

改变一级后,二级会跟着变化,改变二级,三级会变,以此类推,可以指定需要选中的项,可以动态改变每一级的值,支持按需加载

2. 暴露出来的API是什么?

// 已封装的组件(Pickers.js)
import React, { Component } from "react"
import Pickers from "./Pickers"

class Screen extends Component {
  constructor (props) {
    super(props)
    this.state = {
      defaultIndexs: [1, 0], // 指定选择每一级的第几项,可以不填不传,默认为0(第一项)
      visible: true,  // 
      options: [ // 选项数据,label为显示的名称,children为下一级,按需加载直接改变options的值就行了
        {
          label: "A",
          children: [
            {
              label: "J"
            },
            {
              label: "K"
            }
          ]
        },
        {
          label: "B",
          children: [
            {
              label: "X"
            },
            {
              label: "Y"
            }
          ]
        }
      ]
    }
  }
  onChange(arr) { // 选中项改变时触发, arr为当前每一级选中项索引,如选中B和Y,此时的arr就等于[1,1]
    console.log(arr)
  }
  onOk(arr) { // 最终确认时触发,arr同上
    console.log(arr)
  }
  render() {
    return (
      
        
        
      
    )
  }
}

API在前期,往往会在封装的过程中,增加会修改,根据实际情况灵活变通

3. 如何让使用者使用起来更方便?

用目前比较流行的数据结构和风格(可以借鉴其它组件),接口名称定义一目了然

4. 如何能适应更多的场景?

只封装功能,不封装业务

三. 开始写代码
import React, { Component } from "react"
import PropTypes from "prop-types"
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from "react-native"

class Pickers extends Component {
  static propTypes = {
    options: PropTypes.array,
    defaultIndexs: PropTypes.array,
    onClose: PropTypes.func,
    onChange: PropTypes.func,
    onOk: PropTypes.func,
  }

  constructor (props) {
    super(props)
    this.state = {
      options: props.options, // 选项数据
      indexs: props.defaultIndexs || [] // 当前选择的是每一级的每一项,如[1, 0],第一级的第2项,第二级的第一项
    }
    this.close = this.close.bind(this) // 指定this
    this.ok = this.ok.bind(this) // 指定this
  }
  close () { // 取消按钮事件
    this.props.onClose && this.props.onClose()
  }

  ok () { // 确认按钮事件
    this.props.onOk && this.props.onOk(this.state.indexs)
  }
  onChange () { // 选项变化的回调函数

  }
  renderItems () { // 拼装选择项组

  }

  render() {
    return (
      
        
          
            
              {this.renderItems()}
            
            
              
                取消
              
              
                确认
              
            
          
        
      
    )
  }
}

选择项组的拼装是核心功能,多带带提出一个函数(renderItems)来,方便管理和后期维护

 renderItems () { // 拼装选择项组
    const items = []
    const { options = [], indexs = [] } = this.state
    const re = (arr, index) => { // index为第几级
      if (arr && arr.length > 0) {
        const childIndex = indexs[index] || 0 // 当前级指定选中第几项,默认为第一项
        items.push({
          defaultIndex: childIndex,
          values: arr //当前级的选项列表
        })
        if (arr[childIndex] && arr[childIndex].children) {
          const nextIndex = index + 1
          re(arr[childIndex].children, nextIndex)
        }
      }
    }
    re(options, 0) // re为一个递归函数
    return items.map((obj, index) => {
      return ( // PickerItem为单个选择项,list为选项列表,defaultIndex为指定选择第几项,onChange选中选项改变时回调函数,itemIndex选中的第几项,index为第几级,如(2, 1)为选中第二级的第三项
         { this.onChange(itemIndex, index)}}
          />
      )
    })
  }

PickerItem为单个选择项组件,react native中的自带Picker在安卓和IOS上面表现的样式是不一样的,如果产品要求一样的话,就在PickerItem里面改,只需提供相同的接口,相当于PickerItem是独立的,维护起来很方便

// 单个选项
class PickerItem extends Component {
  static propTypes = {
    list: PropTypes.array,
    onChange: PropTypes.func,
    defaultIndex: PropTypes.number,
  }

  static getDerivedStateFromProps(nextProps, prevState) { // list选项列表和defaultIndex变化之后重新渲染
    if (nextProps.list !== prevState.list ||
        nextProps.defaultIndex !== prevState.defaultIndex) {
      return {
        list: nextProps.list,
        index: nextProps.defaultIndex
      }
    }
    return null
  }

  constructor (props) {
    super(props)
    this.state = {
      list: props.list,
      index: props.defaultIndex
    }
    this.onValueChange = this.onValueChange.bind(this)
  }

  onValueChange (itemValue, itemIndex) {
    this.setState( // setState不是立即渲染
      {
        index: itemIndex
      },
      () => {
        this.props.onChange && this.props.onChange(itemIndex)
      })

  }

  render() {
    // Picker的接口直接看react native的文档https://reactnative.cn/docs/picker/
    const { list = [], index = 0 } = this.state
    const value = list[index]
    const Items = list.map((obj, index) => {
      return 
    })
    return (
      
        {Items}
      
    )
  }
}

renderItems()中PickerItem的回调函数onChange

 onChange (itemIndex, currentIndex) { // itemIndex选中的是第几项,currentIndex第几级发生了变化
    const indexArr = []
    const { options = [], indexs = [] } = this.state
    const re = (arr, index) => { // index为第几层,循环每一级
      if (arr && arr.length > 0) {
        let childIndex
        if (index < currentIndex) { // 当前级小于发生变化的层级, 选中项还是之前的项
          childIndex = indexs[index] || 0
        } else if (index === currentIndex) { // 当前级等于发生变化的层级, 选中项是传来的itemIndex
          childIndex = itemIndex
        } else { // 当前级大于发生变化的层级, 选中项应该置为默认0,因为下级的选项会随着上级的变化而变化
          childIndex = 0
        }
        indexArr[index] = childIndex
        if (arr[childIndex] && arr[childIndex].children) {
          const nextIndex = index + 1
          re(arr[childIndex].children, nextIndex)
        }
      }
    }
    re(options, 0)
    this.setState(
      {
        indexs: indexArr // 重置所有选中项,重新渲染
      },
      () => {
        this.props.onChange && this.props.onChange(indexArr)
      }
    )
  }
总结

市面上成熟的多级联动很多,如果对功能要求比较高的话,建议用成熟的组件,这样开发成本低,文档全,团队中其他人易接手。如果只有用到里面非常简单的功能,很快就可以开发好,建议自己开发,没必要引用一个庞大的包,如果要特殊定制的话,就只有自己开发。无论以上哪种情况,能理解里面的运行原理甚好

主要说明在代码里面,也可以直接拷贝完整代码看,没多少内容,如果需要获取对应值的话,直接通过获取的索引查对应值就行了

完整代码
import React, { Component } from "react"
import PropTypes from "prop-types"
import {
  StyleSheet,
  View,
  Text,
  Picker,
  TouchableOpacity,
} from "react-native"

// 单个选项
class PickerItem extends Component {
  static propTypes = {
    list: PropTypes.array,
    onChange: PropTypes.func,
    defaultIndex: PropTypes.number,
  }

  static getDerivedStateFromProps(nextProps, prevState) { // list选项列表和defaultIndex变化之后重新渲染
    if (nextProps.list !== prevState.list ||
        nextProps.defaultIndex !== prevState.defaultIndex) {
      return {
        list: nextProps.list,
        index: nextProps.defaultIndex
      }
    }
    return null
  }

  constructor (props) {
    super(props)
    this.state = {
      list: props.list,
      index: props.defaultIndex
    }
    this.onValueChange = this.onValueChange.bind(this)
  }

  onValueChange (itemValue, itemIndex) {
    this.setState( // setState不是立即渲染
      {
        index: itemIndex
      },
      () => {
        this.props.onChange && this.props.onChange(itemIndex)
      })

  }

  render() {
    // Picker的接口直接看react native的文档https://reactnative.cn/docs/picker/
    const { list = [], index = 0 } = this.state
    const value = list[index]
    const Items = list.map((obj, index) => {
      return 
    })
    return (
      
        {Items}
      
    )
  }
}

// Modal 安卓上无法返回
class Pickers extends Component {
  static propTypes = {
    options: PropTypes.array,
    defaultIndexs: PropTypes.array,
    onClose: PropTypes.func,
    onChange: PropTypes.func,
    onOk: PropTypes.func,
  }
  static getDerivedStateFromProps(nextProps, prevState) { // options数据选项或指定项变化时重新渲染
    if (nextProps.options !== prevState.options ||
        nextProps.defaultIndexs !== prevState.defaultIndexs) {
      return {
        options: nextProps.options,
        indexs: nextProps.defaultIndexs
      }
    }
    return null
  }
  constructor (props) {
    super(props)
    this.state = {
      options: props.options, // 选项数据
      indexs: props.defaultIndexs || [] // 当前选择的是每一级的每一项,如[1, 0],第一级的第2项,第二级的第一项
    }
    this.close = this.close.bind(this) // 指定this
    this.ok = this.ok.bind(this) // 指定this
  }
  close () { // 取消按钮事件
    this.props.onClose && this.props.onClose()
  }

  ok () { // 确认按钮事件
    this.props.onOk && this.props.onOk(this.state.indexs)
  }
  onChange (itemIndex, currentIndex) { // itemIndex选中的是第几项,currentIndex第几级发生了变化
    const indexArr = []
    const { options = [], indexs = [] } = this.state
    const re = (arr, index) => { // index为第几层,循环每一级
      if (arr && arr.length > 0) {
        let childIndex
        if (index < currentIndex) { // 当前级小于发生变化的层级, 选中项还是之前的项
          childIndex = indexs[index] || 0
        } else if (index === currentIndex) { // 当前级等于发生变化的层级, 选中项是传来的itemIndex
          childIndex = itemIndex
        } else { // 当前级大于发生变化的层级, 选中项应该置为默认0,因为下级的选项会随着上级的变化而变化
          childIndex = 0
        }
        indexArr[index] = childIndex
        if (arr[childIndex] && arr[childIndex].children) {
          const nextIndex = index + 1
          re(arr[childIndex].children, nextIndex)
        }
      }
    }
    re(options, 0)
    this.setState(
      {
        indexs: indexArr // 重置所有选中项,重新渲染
      },
      () => {
        this.props.onChange && this.props.onChange(indexArr)
      }
    )
  }
  renderItems () { // 拼装选择项组
    const items = []
    const { options = [], indexs = [] } = this.state
    const re = (arr, index) => { // index为第几级
      if (arr && arr.length > 0) {
        const childIndex = indexs[index] || 0 // 当前级指定选中第几项,默认为第一项
        items.push({
          defaultIndex: childIndex,
          values: arr //当前级的选项列表
        })
        if (arr[childIndex] && arr[childIndex].children) {
          const nextIndex = index + 1
          re(arr[childIndex].children, nextIndex)
        }
      }
    }
    re(options, 0) // re为一个递归函数
    return items.map((obj, index) => {
      return ( // PickerItem为单个选择项,list为选项列表,defaultIndex为指定选择第几项,onChange选中选项改变时回调函数
         { this.onChange(itemIndex, index)}}
          />
      )
    })
  }

  render() {
    return (
      
        
          
            
              {this.renderItems()}
            
            
              
                取消
              
              
                确认
              
            
          
        
      
    )
  }
}

const styles = StyleSheet.create({
  box: {
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 9999,
  },
  bg: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.4)",
    justifyContent: "center",
    alignItems: "center"
  },
  dialogBox: {
    width: 260,
    flexDirection: "column",
    backgroundColor: "#fff",
  },
  pickerBox: {
    flexDirection: "row",
  },
  btnBox: {
    flexDirection: "row",
    height: 45,
  },
  cancelBtn: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    borderColor: "#4A90E2",
    borderWidth: 1,
  },
  cancelBtnText: {
    fontSize: 15,
    color: "#4A90E2"
  },
  okBtn: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#4A90E2",
  },
  okBtnText: {
    fontSize: 15,
    color: "#fff"
  },
})

export default Pickers

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97879.html

相关文章

  • 如何造一个移动端的联动选择器(一)

    摘要:写在前面之前写了一篇为移动端而生的自定义多级联动选择器,得到了很多人的关注。预知后话地址为移动端而生的自定义多级联动选择器到此,需求已经明确。 写在前面 之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器,得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇,所以写了几篇文章,来说说它的成长史~ 在阅读本文之前,确保你有稍微看过 MultiPicker ...

    Steve_Wang_ 评论0 收藏0
  • 如何造一个移动端的联动选择器(一)

    摘要:写在前面之前写了一篇为移动端而生的自定义多级联动选择器,得到了很多人的关注。预知后话地址为移动端而生的自定义多级联动选择器到此,需求已经明确。 写在前面 之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器,得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇,所以写了几篇文章,来说说它的成长史~ 在阅读本文之前,确保你有稍微看过 MultiPicker ...

    andycall 评论0 收藏0
  • 如何造一个移动端的联动选择器(一)

    摘要:写在前面之前写了一篇为移动端而生的自定义多级联动选择器,得到了很多人的关注。预知后话地址为移动端而生的自定义多级联动选择器到此,需求已经明确。 写在前面 之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器,得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇,所以写了几篇文章,来说说它的成长史~ 在阅读本文之前,确保你有稍微看过 MultiPicker ...

    tabalt 评论0 收藏0
  • 如何造一个移动端的联动选择器(三)

    摘要:写在前面之前写了一篇为移动端而生的自定义多级联动选择器,得到了很多人的关注。预知后话地址为移动端而生的自定义多级联动选择器到此,时间选择器的核心算法就已经基本掌握了。 写在前面 之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器,得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇,所以写了几篇文章,来说说它的成长史~ 在阅读本文之前,确保你有稍微看过 ...

    ls0609 评论0 收藏0
  • 如何造一个移动端的联动选择器(三)

    摘要:写在前面之前写了一篇为移动端而生的自定义多级联动选择器,得到了很多人的关注。预知后话地址为移动端而生的自定义多级联动选择器到此,时间选择器的核心算法就已经基本掌握了。 写在前面 之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器,得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇,所以写了几篇文章,来说说它的成长史~ 在阅读本文之前,确保你有稍微看过 ...

    zzzmh 评论0 收藏0

发表评论

0条评论

Coly

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<