自己動(dòng)手封裝一個(gè)React Native多級(jí)聯(lián)動(dòng)
更新時(shí)間：2018年09月19日 11:19:52 作者：zhaowenyin
這篇文章主要介紹了自己動(dòng)手封裝一個(gè)React Native多級(jí)聯(lián)動(dòng)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
背景
肯定是最近有一個(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è)組件之前，首先你要知道組件長(zhǎng)什么樣子，大概的輪廓要了解
二. 構(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>
)
}
}
API在前期，往往會(huì)在封裝的過程中，增加會(huì)修改，根據(jù)實(shí)際情況靈活變通
3. 如何讓使用者使用起來更方便？
用目前比較流行的數(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 (
<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}>確認(rèn)</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</TouchableOpacity>
</View>
)
}
}
選擇項(xiàng)組的拼裝是核心功能，單獨(dú)提出一個(gè)函數(shù)（renderItems）來，方便管理和后期維護(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)
<PickerItem
key={index.toString()}
list={obj.values}
defaultIndex={obj.defaultIndex}
onChange={(itemIndex) => { this.onChange(itemIndex, index)}}
/>
)
})
}
PickerItem為單個(gè)選擇項(xiàng)組件，react native中的自帶Picker在安卓和IOS上面表現(xiàn)的樣式是不一樣的，如果產(chǎn)品要求一樣的話，就在PickerItem里面改，只需提供相同的接口，相當(dāng)于PickerItem是獨(dú)立的，維護(hù)起來很方便
// 單個(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 <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的回調(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)是傳來的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ā)，沒必要引用一個(gè)龐大的包，如果要特殊定制的話，就只有自己開發(fā)。無論以上哪種情況，能理解里面的運(yùn)行原理甚好
主要說明在代碼里面，也可以直接拷貝完整代碼看，沒多少內(nèi)容，如果需要獲取對(duì)應(yīng)值的話，直接通過獲取的索引查對(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 <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數(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)是傳來的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ù)
<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}>確認(rèn)</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
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解React中setState回調(diào)函數(shù)
這篇文章主要介紹了詳解React中setState回調(diào)函數(shù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
基于React的狀態(tài)管理實(shí)現(xiàn)一個(gè)簡(jiǎn)單的顏色轉(zhuǎn)換器
這篇文章主要介紹了用React的狀態(tài)管理,簡(jiǎn)簡(jiǎn)單單實(shí)現(xiàn)一個(gè)顏色轉(zhuǎn)換器,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了react?context優(yōu)化四重奏教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
react PropTypes校驗(yàn)傳遞的值操作示例
這篇文章主要介紹了react PropTypes校驗(yàn)傳遞的值操作,結(jié)合實(shí)例形式分析了react PropTypes針對(duì)傳遞的值進(jìn)行校驗(yàn)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04
在單頁面里面，父子組件傳值是比較常見的，這篇文章主要介紹了React父子組件間的傳值的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo
這篇文章主要為大家介紹了ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
詳解react-router如何實(shí)現(xiàn)按需加載
本篇文章主要介紹了react-router如何實(shí)現(xiàn)按需加載，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家介紹了Remix如何支持原生CSS的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Create?react?app修改webapck配置導(dǎo)入文件alias
這篇文章主要為大家介紹了Create?react?app修改webapck配置導(dǎo)入文件alias,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
使用Node搭建reactSSR服務(wù)端渲染架構(gòu)
這篇文章主要介紹了使用Node搭建reactSSR服務(wù)端渲染架構(gòu),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08