自己动手封装一个ReactNative多级联动-创新互联

背景

目前成都创新互联公司已为1000+的企业提供了网站建设、域名、网页空间、成都网站托管、企业网站设计、沙河网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

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

本来想封装完整之后，放在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 (
   <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>
  )
 }
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

标题名称：自己动手封装一个ReactNative多级联动-创新互联
当前地址：https://www.cdcxhl.com/article20/cssojo.html

成都网站建设公司_创新互联，为您提供网站设计、关键词优化、服务器托管、网站营销、软件开发、用户体验

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联