動(dòng)手封裝一個(gè)React Native多級(jí)聯(lián)動(dòng)

Coly 發(fā)布于2019-08-23 12:02 / 1693人閱讀

摘要：如果只有用到里面非常簡(jiǎn)單的功能，很快就可以開發(fā)好，建議自己開發(fā)，沒(méi)必要引用一個(gè)龐大的包，如果要特殊定制的話，就只有自己開發(fā)。

背景

肯定是最近有一個(gè)項(xiàng)目，需要一個(gè)二級(jí)聯(lián)動(dòng)功能了！
本來(lái)想封裝完整之后，放在github上面賺星星，但發(fā)現(xiàn)市面上已經(jīng)有比較成熟的了，為什么我在開發(fā)之前沒(méi)去搜索一下（項(xiàng)目很趕進(jìn)度），淚崩啊，既然已經(jīng)封裝就來(lái)說(shuō)說(shuō)過(guò)程吧

任務(wù)開始 一. 原型圖或設(shè)計(jì)圖

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

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

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

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

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

2. 暴露出來(lái)的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 (
      
        
        
      
    )
  }
}

API在前期，往往會(huì)在封裝的過(guò)程中，增加會(huì)修改，根據(jù)實(shí)際情況靈活變通

3. 如何讓使用者使用起來(lái)更方便？

用目前比較流行的數(shù)據(jù)結(jié)構(gòu)和風(fēng)格（可以借鑒其它組件），接口名稱定義一目了然

4. 如何能適應(yīng)更多的場(chǎng)景？

只封裝功能，不封裝業(yè)務(wù)

三. 開始寫代碼

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, // 選項(xiàng)數(shù)據(jù)
      indexs: props.defaultIndexs || [] // 當(dāng)前選擇的是每一級(jí)的每一項(xiàng)，如[1, 0]，第一級(jí)的第2項(xiàng)，第二級(jí)的第一項(xiàng)
    }
    this.close = this.close.bind(this) // 指定this
    this.ok = this.ok.bind(this) // 指定this
  }
  close () { // 取消按鈕事件
    this.props.onClose && this.props.onClose()
  }

  ok () { // 確認(rèn)按鈕事件
    this.props.onOk && this.props.onOk(this.state.indexs)
  }
  onChange () { // 選項(xiàng)變化的回調(diào)函數(shù)

  }
  renderItems () { // 拼裝選擇項(xiàng)組

  }

  render() {
    return (
      
        
          
            
              {this.renderItems()}
            
            
              
                取消
              
              
                確認(rèn)
              
            
          
        
      
    )
  }
}

選擇項(xiàng)組的拼裝是核心功能，多帶帶提出一個(gè)函數(shù)（renderItems）來(lái)，方便管理和后期維護(hù)

 renderItems () { // 拼裝選擇項(xiàng)組
    const items = []
    const { options = [], indexs = [] } = this.state
    const re = (arr, index) => { // index為第幾級(jí)
      if (arr && arr.length > 0) {
        const childIndex = indexs[index] || 0 // 當(dāng)前級(jí)指定選中第幾項(xiàng),默認(rèn)為第一項(xiàng)
        items.push({
          defaultIndex: childIndex,
          values: arr //當(dāng)前級(jí)的選項(xiàng)列表
        })
        if (arr[childIndex] && arr[childIndex].children) {
          const nextIndex = index + 1
          re(arr[childIndex].children, nextIndex)
        }
      }
    }
    re(options, 0) // re為一個(gè)遞歸函數(shù)
    return items.map((obj, index) => {
      return ( // PickerItem為單個(gè)選擇項(xiàng),list為選項(xiàng)列表，defaultIndex為指定選擇第幾項(xiàng)，onChange選中選項(xiàng)改變時(shí)回調(diào)函數(shù)，itemIndex選中的第幾項(xiàng)，index為第幾級(jí)，如（2, 1）為選中第二級(jí)的第三項(xiàng)
         { this.onChange(itemIndex, index)}}
          />
      )
    })
  }

PickerItem為單個(gè)選擇項(xiàng)組件，react native中的自帶Picker在安卓和IOS上面表現(xiàn)的樣式是不一樣的，如果產(chǎn)品要求一樣的話，就在PickerItem里面改，只需提供相同的接口，相當(dāng)于PickerItem是獨(dú)立的，維護(hù)起來(lái)很方便

// 單個(gè)選項(xiàng)
class PickerItem extends Component {
  static propTypes = {
    list: PropTypes.array,
    onChange: PropTypes.func,
    defaultIndex: PropTypes.number,
  }

  static getDerivedStateFromProps(nextProps, prevState) { // list選項(xiàng)列表和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的回調(diào)函數(shù)onChange

 onChange (itemIndex, currentIndex) { // itemIndex選中的是第幾項(xiàng)，currentIndex第幾級(jí)發(fā)生了變化
    const indexArr = []
    const { options = [], indexs = [] } = this.state
    const re = (arr, index) => { // index為第幾層,循環(huán)每一級(jí)
      if (arr && arr.length > 0) {
        let childIndex
        if (index < currentIndex) { // 當(dāng)前級(jí)小于發(fā)生變化的層級(jí), 選中項(xiàng)還是之前的項(xiàng)
          childIndex = indexs[index] || 0
        } else if (index === currentIndex) { // 當(dāng)前級(jí)等于發(fā)生變化的層級(jí), 選中項(xiàng)是傳來(lái)的itemIndex
          childIndex = itemIndex
        } else { // 當(dāng)前級(jí)大于發(fā)生變化的層級(jí), 選中項(xiàng)應(yīng)該置為默認(rèn)0，因?yàn)橄录?jí)的選項(xiàng)會(huì)隨著上級(jí)的變化而變化
          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 // 重置所有選中項(xiàng)，重新渲染
      },
      () => {
        this.props.onChange && this.props.onChange(indexArr)
      }
    )
  }

總結(jié)

市面上成熟的多級(jí)聯(lián)動(dòng)很多，如果對(duì)功能要求比較高的話，建議用成熟的組件，這樣開發(fā)成本低，文檔全，團(tuán)隊(duì)中其他人易接手。如果只有用到里面非常簡(jiǎn)單的功能，很快就可以開發(fā)好，建議自己開發(fā)，沒(méi)必要引用一個(gè)龐大的包，如果要特殊定制的話，就只有自己開發(fā)。無(wú)論以上哪種情況，能理解里面的運(yùn)行原理甚好

主要說(shuō)明在代碼里面，也可以直接拷貝完整代碼看，沒(méi)多少內(nèi)容，如果需要獲取對(duì)應(yīng)值的話，直接通過(guò)獲取的索引查對(duì)應(yīng)值就行了

完整代碼

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

// 單個(gè)選項(xiàng)
class PickerItem extends Component {
  static propTypes = {
    list: PropTypes.array,
    onChange: PropTypes.func,
    defaultIndex: PropTypes.number,
  }

  static getDerivedStateFromProps(nextProps, prevState) { // list選項(xiàng)列表和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 安卓上無(wú)法返回
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數(shù)據(jù)選項(xiàng)或指定項(xiàng)變化時(shí)重新渲染
    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, // 選項(xiàng)數(shù)據(jù)
      indexs: props.defaultIndexs || [] // 當(dāng)前選擇的是每一級(jí)的每一項(xiàng)，如[1, 0]，第一級(jí)的第2項(xiàng)，第二級(jí)的第一項(xiàng)
    }
    this.close = this.close.bind(this) // 指定this
    this.ok = this.ok.bind(this) // 指定this
  }
  close () { // 取消按鈕事件
    this.props.onClose && this.props.onClose()
  }

  ok () { // 確認(rèn)按鈕事件
    this.props.onOk && this.props.onOk(this.state.indexs)
  }
  onChange (itemIndex, currentIndex) { // itemIndex選中的是第幾項(xiàng)，currentIndex第幾級(jí)發(fā)生了變化
    const indexArr = []
    const { options = [], indexs = [] } = this.state
    const re = (arr, index) => { // index為第幾層,循環(huán)每一級(jí)
      if (arr && arr.length > 0) {
        let childIndex
        if (index < currentIndex) { // 當(dāng)前級(jí)小于發(fā)生變化的層級(jí), 選中項(xiàng)還是之前的項(xiàng)
          childIndex = indexs[index] || 0
        } else if (index === currentIndex) { // 當(dāng)前級(jí)等于發(fā)生變化的層級(jí), 選中項(xiàng)是傳來(lái)的itemIndex
          childIndex = itemIndex
        } else { // 當(dāng)前級(jí)大于發(fā)生變化的層級(jí), 選中項(xiàng)應(yīng)該置為默認(rèn)0，因?yàn)橄录?jí)的選項(xiàng)會(huì)隨著上級(jí)的變化而變化
          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 // 重置所有選中項(xiàng)，重新渲染
      },
      () => {
        this.props.onChange && this.props.onChange(indexArr)
      }
    )
  }
  renderItems () { // 拼裝選擇項(xiàng)組
    const items = []
    const { options = [], indexs = [] } = this.state
    const re = (arr, index) => { // index為第幾級(jí)
      if (arr && arr.length > 0) {
        const childIndex = indexs[index] || 0 // 當(dāng)前級(jí)指定選中第幾項(xiàng),默認(rèn)為第一項(xiàng)
        items.push({
          defaultIndex: childIndex,
          values: arr //當(dāng)前級(jí)的選項(xiàng)列表
        })
        if (arr[childIndex] && arr[childIndex].children) {
          const nextIndex = index + 1
          re(arr[childIndex].children, nextIndex)
        }
      }
    }
    re(options, 0) // re為一個(gè)遞歸函數(shù)
    return items.map((obj, index) => {
      return ( // PickerItem為單個(gè)選擇項(xiàng),list為選項(xiàng)列表，defaultIndex為指定選擇第幾項(xiàng)，onChange選中選項(xiàng)改變時(shí)回調(diào)函數(shù)
         { this.onChange(itemIndex, index)}}
          />
      )
    })
  }

  render() {
    return (
      
        
          
            
              {this.renderItems()}
            
            
              
                取消
              
              
                確認(rèn)
              
            
          
        
      
    )
  }
}

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97879.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Coly

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

干貨|app自動(dòng)化測(cè)試之設(shè)備交互API詳解

閱讀 1977·2021-09-23 11:21
flex布局，子元素寬度不符合預(yù)期

閱讀 1750·2019-08-29 17:27
關(guān)于Http協(xié)議，你必須要知道的

閱讀 1112·2019-08-29 17:03
前端面試實(shí)習(xí)題目總結(jié)：

閱讀 784·2019-08-29 15:07
JS中只有按值傳遞

閱讀 2001·2019-08-29 11:13
JavaScript面向?qū)ο笾械睦^承個(gè)人分享

閱讀 2433·2019-08-26 12:14
前端代碼質(zhì)量進(jìn)階：自定義 eslint 規(guī)則校驗(yàn)業(yè)務(wù)邏輯

閱讀 1004·2019-08-26 11:52
every()some()個(gè)人理解

閱讀 1779·2019-08-23 17:09

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

動(dòng)手封裝一個(gè)React Native多級(jí)聯(lián)動(dòng)

相關(guān)文章

**如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（一）**

**如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（一）**

**如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（一）**

**如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（三）**

**如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（三）**

發(fā)表評(píng)論

0條評(píng)論

Coly

男|高級(jí)講師

TA的文章

干貨|app自動(dòng)化測(cè)試之設(shè)備交互API詳解

flex布局，子元素寬度不符合預(yù)期

關(guān)于Http協(xié)議，你必須要知道的

前端面試實(shí)習(xí)題目總結(jié)：

JS中只有按值傳遞

JavaScript面向?qū)ο笾械睦^承個(gè)人分享

前端代碼質(zhì)量進(jìn)階：自定義 eslint 規(guī)則校驗(yàn)業(yè)務(wù)邏輯

every()some()個(gè)人理解

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

動(dòng)手封裝一個(gè)React Native多級(jí)聯(lián)動(dòng)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！