溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
獲取短信驗證碼
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
登 錄 注冊有禮
云服務器 香港服務器 高防服務器
最新更新 網站標簽 地圖導航
產品

自己動手封裝一個React Native多級聯動

發布時間：2020-09-20 05:06:05 來源：腳本之家 閱讀：202 作者：zhaowenyin 欄目：web開發

背景

肯定是最近有一個項目，需要一個二級聯動功能了！

本來想封裝完整之后，放在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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節
推薦閱讀：
  1. react native基礎
  2. React Native開發封裝Toast與加載Loading組件的示例分析

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

react native 多級聯動

猜你喜歡

最新資訊
相關推薦

相關標簽

reactjs react-devtools react-native reactor react生命周期 react native react.js react hook reactnative reactive create-react-app react-redux react-navigation react16 react-bootstrap react組件 react hooks react-router native vlan terminator
AI
助
手
產品服務
地區劃分
專題活動
幫助支持
關于我們
售后咨詢
7*24小時在線電話：400-100-2938
7*24小時在線 QQ：800811969
關注億速云

億速云公眾號

手機網站二維碼

Copyright ? Yisu Cloud Ltd. All Rights Reserved. 2018 版權所有

廣州億速云計算有限公司粵ICP備17096448號-1 粵公網安備 44010402001142號增值電信業務經營許可證編號：B1-20181529

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女