2. 程式人生 > >動手封裝一個React Native多級聯動

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

阿新 • • 發佈：2018-12-10

背景

肯定是最近有一個專案，需要一個二級聯動功能了！本來想封裝完整之後，放在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>
    )
  }
}

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

相關推薦

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

背景 肯定是最近有一個專案，需要一個二級聯動功能了！本來想封裝完整之後，放在github上面賺星星，但發現市面上已經有比較成熟的了，為什麼我在開發之前沒去搜索一下（專案很趕進度），淚崩啊，既然已經封裝就來說說過程吧 任務開始 一. 原型圖或設計圖 在封裝一個元件之前

我的第一個react native

配置 但是 如果 xcode 需要 第一個 並不是 之前 選擇 雖然react native出來了很久，但是自己一直因為各種原因沒有接觸學習，中間嘗試過一次，但是因為復雜的環境配置而放棄了。現在，終於因為公司的項目不得不去學習了，當然了，再配置開發環境上面，我還是懵懵的，網

初始化一個react-native專案

npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global npm install

載入一個react native 頁面

要在原生app中載入js檢視，首先要先將js資原始檔載入到app中，然後使用一個原生類的例項作為容器承接js定義的檢視，最後將這個容器類例項新增到原生檢視中。 載入JS Bundle js程式碼是以JS Bundle的形式儲存的，在app中使用js中定義

第一個react-native工程，簡單點

推薦一個學習react-native的好網站，是將react-native在github上面的文章翻譯過來的中文網站，挺適合一個入門react-native的人學習，http://reactnative.cn/，學的時候最好選擇最新的學習，我選擇的是0.39版本

從0到1寫一個react native的app(上)

我是一個react-native的初學者，在學習完react-native的一些基本內容，比如，頁面佈局，列表渲染，事件處理，網路請求，路由跳轉頁面等等之後，我想做一個實戰app來綜合應用所學的知識。下面是我要實現的app，一個簡單的github的app.

Windows下安裝和構建我們第一個React Native應用程式（我是用的win10）

windows下構建我們的第一個React Native應用程式，主要分二個思路！ 1：無需安裝或配置任何工具來構建React Native應用程式。（如果你只是想簡單瞭解學習react-native） 2：需要安裝配置對應的依賴工具來夠構建我們的React Nativ

動手建立一個自己的「React native」原生模組

前言 我們在使用RN的時候，會發現RN提供了很多Module供JS呼叫，這些Module能夠滿足我們一些基礎的應用場景，但是在實際的專案中，必定會有一些互動邏輯需要我們自己去實現，這時候就需要我們自定義一些Module供JS呼叫，那麼怎麼才能讓JS呼叫到我們自定義的Module呢？ 下面我們就一步步的去實現

用react native 做的一個推酷client

master 數據 post use his 代碼 ren ref xcode 用react native 做的一個推酷client 僅供大家參考。僅僅為拋磚引玉。希望大家能以此來了解react。並編寫出很多其它的優質的開源庫，為程序猿做出貢獻。 用

react native中的聊天氣泡以及timer封裝成的發送驗證碼倒計時

日常 per pad direct 總結 mage str parent erb 今天看來情書寫的文章，研究了一下大佬寫的文章，自己做一點總結。 其實，今天我想把我近期遇到的坑都總結一下：1.goBack的跨頁面跳轉，又兩種方法，一可以像兔哥那樣修改navigatio

一個資深iOS開發者對於React Native的看法

本文轉自：http://blog.csdn.net/zhe13/article/details/48439967?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io 當我第一次嘗試ReactNative的時候，我

React Native之函式作為引數傳遞給另外一個函式去呼叫

1 用法 我們一般喜歡把js裡面的函式作為引數傳遞給另外一個函式,然後再呼叫這個函式,有點像C語言裡面的函式指標         2 程式碼測試 寫了一個函式,2個引數分別是函式,然後更具資料決定呼叫哪個函式 /** *

React-Native 自封裝原生模組

React-Native 出現也有一段時間了，其實我們在一些應用中已經接觸過基於它的或效果類似於它的App,如手機淘寶。在每年雙十一時我們會發現沒有更新app也會有一些不同的介面。當然你可能認為WebView也可以做到這些。但實際上RN與WebView是不同的，RN的控制元件正如其

react native中封裝別的外掛，在父元件中呼叫子元件的ref

話不多說，直接上程式碼： 父元件中： import MyToast from '../../myToast'; <MyToast onRef={toast => this.toast = toast} position="center" /> 子元件中： impor

基於React Native封裝的資訊頻道TopBar，常見於新聞客戶端react-native-scrollable-topbar

react-native-scrollable-topbar 基於React Native封裝的資訊頻道TopBar，常見於新聞客戶端，具體實現功能如下： TopBar區域可手動滑動(Underline 聯動) 點選頻道實現內容區切換 根據內容區(this.p

基於React Native封裝的表單提交Container，用於替代RN官方元件KeyboardAvoidingView(不相容Android)react-native-keyboardavoidv

react-native-keyboardavoidview 基於React Native封裝的表單提交Container，用於替代RN官方元件KeyboardAvoidingView(不相容Android) Theory 重寫TextInput的onFocus方法，藉助Sc

基於React Native官方元件Image封裝的具備載入生命週期視覺反饋的元件react-native-loading-image

react-native-loading-image 基於React Native官方元件Image封裝的具備載入生命週期視覺反饋的元件,具體實現功能如下： 網路圖片Pending狀態渲染，提供閃爍動畫、loading.gif兩種方式 網路圖片Error狀態渲染

React Native：自定義一個導航欄，改變狀態列背景，隱藏狀態列

設計開發過程中，導航欄都會有所不同，這時候使用RN就需要自定義一個想要的導航欄了，RN中文網有講專門ios的導航欄（NavigatorIOS），可以不用自定義。 首先定義自定義導航欄的一些屬性的約束，記得npm install --save prop-types然後引入import Prop

Audio 標籤的使用和自己封裝一個強大的React音樂播放器

原文地址：https://www.dodoblog.cn/blog?id=5be84d5c70b2b617f27a4610   這篇文章主要介紹一下部落格裡的這個音樂播放器是怎麼寫的 為了更好的表達高深的東西，還是需要先強調點簡單的東西  Audio元素的屬性

一個標準的 react-native 元件

前言：react-native開發的app，雖然說是相容 android 和 ios 兩端；但其框架本身的設計思想有很多還是和前端類似的（畢竟是 react 的衍生產物）；其開發模式主要還是元件化！ 今天，來總結一下，一個 react-native 標準的元件包括哪些元素： 標準的元件完