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


Posted in Javascript onSeptember 19, 2018

背景

肯定是最近有一个项目,需要一个二级联动功能了!

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

任务开始

一. 原型图或设计图

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

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

二. 构思结构

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

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 (
   <View style={styles.container}>
    <Pickers
     options={this.state.options}
     defaultIndexs={this.state.defaultIndexs}
     onChange={this.onChange.bind(this)}
     onOk={this.onOk.bind(this)}>
    </Pickers>
   </View>
  )
 }
}

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 (
   <View
    style={styles.box}>
    <TouchableOpacity
     onPress={this.close}
     style={styles.bg}>
     <TouchableOpacity
      activeOpacity={1}
      style={styles.dialogBox}>
      <View style={styles.pickerBox}>
       {this.renderItems()}
      </View>
      <View style={styles.btnBox}>
       <TouchableOpacity
        onPress={this.close}
        style={styles.cancelBtn}>
        <Text
         numberOfLines={1}
         ellipsizeMode={"tail"}
         style={styles.cancelBtnText}>取消</Text>
       </TouchableOpacity>
       <TouchableOpacity
        onPress={this.ok}
        style={styles.okBtn}>
        <Text
         numberOfLines={1}
         ellipsizeMode={"tail"}
         style={styles.okBtnText}>确认</Text>
       </TouchableOpacity>
      </View>
     </TouchableOpacity>
    </TouchableOpacity>
   </View>
  )
 }
}

选择项组的拼装是核心功能,单独提出一个函数(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)为选中第二级的第三项
    <PickerItem
     key={index.toString()}
     list={obj.values}
     defaultIndex={obj.defaultIndex}
     onChange={(itemIndex) => { 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 <Picker.Item key={index} label={obj.label} value={obj} />
  })
  return (
   <Picker
    selectedValue={value}
    style={{ flex: 1 }}
    mode="dropdown"
    onValueChange={this.onValueChange}>
    {Items}
   </Picker>
  )
 }
}

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 <Picker.Item key={index} label={obj.label} value={obj} />
  })
  return (
   <Picker
    selectedValue={value}
    style={{ flex: 1 }}
    mode="dropdown"
    onValueChange={this.onValueChange}>
    {Items}
   </Picker>
  )
 }
}

// 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选中选项改变时回调函数
    <PickerItem
     key={index.toString()}
     list={obj.values}
     defaultIndex={obj.defaultIndex}
     onChange={(itemIndex) => { this.onChange(itemIndex, index)}}
     />
   )
  })
 }

 render() {
  return (
   <View
    style={styles.box}>
    <TouchableOpacity
     onPress={this.close}
     style={styles.bg}>
     <TouchableOpacity
      activeOpacity={1}
      style={styles.dialogBox}>
      <View style={styles.pickerBox}>
       {this.renderItems()}
      </View>
      <View style={styles.btnBox}>
       <TouchableOpacity
        onPress={this.close}
        style={styles.cancelBtn}>
        <Text
         numberOfLines={1}
         ellipsizeMode={"tail"}
         style={styles.cancelBtnText}>取消</Text>
       </TouchableOpacity>
       <TouchableOpacity
        onPress={this.ok}
        style={styles.okBtn}>
        <Text
         numberOfLines={1}
         ellipsizeMode={"tail"}
         style={styles.okBtnText}>确认</Text>
       </TouchableOpacity>
      </View>
     </TouchableOpacity>
    </TouchableOpacity>
   </View>
  )
 }
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的一些常用方法小结
Jun 29 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
Javascript之String对象详解
Jun 08 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
node.js中express-session配置项详解
May 31 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 #Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 #Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 #Javascript
node.js环境搭建图文详解
Sep 19 #Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 #Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 #Javascript
Vue瀑布流插件的使用示例
Sep 19 #Javascript
You might like
PHP动态图像的创建
2006/10/09 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
ThinkPHP安装和设置
2015/07/27 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
vue使用websocket的方法实例分析
2019/06/22 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
jQuery实现本地存储
2020/12/22 jQuery
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
pygame实现非图片按钮效果
2019/10/29 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
Python eval函数介绍及用法
2020/11/09 Python
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
迎新晚会主持词
2014/03/24 职场文书
党员实事承诺书
2014/03/26 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
惊天动地观后感
2015/06/10 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
Python中time标准库的使用教程
2022/04/13 Python