背景

目前成都創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、沙河網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

肯定是最近有一個(gè)項(xiàng)目，需要一個(gè)二級(jí)聯(lián)動(dòng)功能了！

本來想封裝完整之后，放在github上面賺星星，但發(fā)現(xiàn)市面上已經(jīng)有比較成熟的了，為什么我在開發(fā)之前沒去搜索一下（項(xiàng)目很趕進(jìn)度），淚崩啊，既然已經(jīng)封裝就來說說過程吧

任務(wù)開始

一. 原型圖或設(shè)計(jì)圖

在封裝一個(gè)組件之前，首先你要知道組件長什么樣子，大概的輪廓要了解

二. 構(gòu)思結(jié)構(gòu)

在封裝之前，先在腦海里面想一下

1. 這個(gè)組件需要達(dá)到的功能是什么？

改變一級(jí)后，二級(jí)會(huì)跟著變化，改變二級(jí)，三級(jí)會(huì)變，以此類推，可以指定需要選中的項(xiàng)，可以動(dòng)態(tài)改變每一級(jí)的值，支持按需加載

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], // 指定選擇每一級(jí)的第幾項(xiàng)，可以不填不傳，默認(rèn)為0(第一項(xiàng))
   visible: true, // 
   options: [ // 選項(xiàng)數(shù)據(jù)，label為顯示的名稱，children為下一級(jí)，按需加載直接改變options的值就行了
    {
     label: 'A',
     children: [
      {
       label: 'J'
      },
      {
       label: 'K'
      }
     ]
    },
    {
     label: 'B',
     children: [
      {
       label: 'X'
      },
      {
       label: 'Y'
      }
     ]
    }
   ]
  }
 }
 onChange(arr) { // 選中項(xiàng)改變時(shí)觸發(fā), arr為當(dāng)前每一級(jí)選中項(xiàng)索引，如選中B和Y，此時(shí)的arr就等于[1,1]
  console.log(arr)
 }
 onOk(arr) { // 最終確認(rèn)時(shí)觸發(fā)，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>
  )
 }
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱：自己動(dòng)手封裝一個(gè)ReactNative多級(jí)聯(lián)動(dòng)-創(chuàng)新互聯(lián)
當(dāng)前地址：http://vcdvsql.cn/article20/cssojo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、關(guān)鍵詞優(yōu)化、服務(wù)器托管、網(wǎng)站營銷、軟件開發(fā)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)