如何封装一个React Native多级联动（代码完成）

背景

肯定是最近有一个项目，需要一个二级联动功能了！
本来想封装完整之后，放在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>
    )
  }
}