native封装卡片 react_自己动手封装一个React Native多级联动
背景
肯定是最近有一個(gè)項(xiàng)目，需要一個(gè)二級(jí)聯(lián)動(dòng)功能了！
本來(lái)想封裝完整之后，放在github上面賺星星，但發(fā)現(xiàn)市面上已經(jīng)有比較成熟的了，為什么我在開(kāi)發(fā)之前沒(méi)去搜索一下(項(xiàng)目很趕進(jìn)度)，淚崩啊，既然已經(jīng)封裝就來(lái)說(shuō)說(shuō)過(guò)程吧
任務(wù)開(kāi)始
一. 原型圖或設(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 (
options={this.state.options}
defaultIndexs={this.state.defaultIndexs}
onChange={this.onChange.bind(this)}
onOk={this.onOk.bind(this)}>
)
}
}
API在前期，往往會(huì)在封裝的過(guò)程中，增加會(huì)修改，根據(jù)實(shí)際情況靈活變通
3. 如何讓使用者使用起來(lái)更方便？
用目前比較流行的數(shù)據(jù)結(jié)構(gòu)和風(fēng)格(可以借鑒其它組件)，接口名稱定義一目了然
4. 如何能適應(yīng)更多的場(chǎng)景？
只封裝功能，不封裝業(yè)務(wù)
三. 開(kāi)始寫(xiě)代碼
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 (
style={styles.box}>
onPress={this.close}
style={styles.bg}>
activeOpacity={1}
style={styles.dialogBox}>
{this.renderItems()}
onPress={this.close}
style={styles.cancelBtn}>
numberOfLines={1}
ellipsizeMode={"tail"}
style={styles.cancelBtnText}>取消
onPress={this.ok}
style={styles.okBtn}>
numberOfLines={1}
ellipsizeMode={"tail"}
style={styles.okBtnText}>確認(rèn)
)
}
}
選擇項(xiàng)組的拼裝是核心功能，單獨(dú)提出一個(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)
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ù)起來(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 (
selectedValue={value}
style={{ flex: 1 }}
mode="dropdown"
onValueChange={this.onValueChange}>
{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ì)功能要求比較高的話，建議用成熟的組件，這樣開(kāi)發(fā)成本低，文檔全，團(tuán)隊(duì)中其他人易接手。如果只有用到里面非常簡(jiǎn)單的功能，很快就可以開(kāi)發(fā)好，建議自己開(kāi)發(fā)，沒(méi)必要引用一個(gè)龐大的包，如果要特殊定制的話，就只有自己開(kāi)發(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 (
selectedValue={value}
style={{ flex: 1 }}
mode="dropdown"
onValueChange={this.onValueChange}>
{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ù)
key={index.toString()}
list={obj.values}
defaultIndex={obj.defaultIndex}
onChange={(itemIndex) => { this.onChange(itemIndex, index)}}
/>
)
})
}
render() {
return (
style={styles.box}>
onPress={this.close}
style={styles.bg}>
activeOpacity={1}
style={styles.dialogBox}>
{this.renderItems()}
onPress={this.close}
style={styles.cancelBtn}>
numberOfLines={1}
ellipsizeMode={"tail"}
style={styles.cancelBtnText}>取消
onPress={this.ok}
style={styles.okBtn}>
numberOfLines={1}
ellipsizeMode={"tail"}
style={styles.okBtnText}>確認(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
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
總結(jié)
以上是生活随笔為你收集整理的native封装卡片 react_自己动手封装一个React Native多级联动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 斯库尔德维特山洞怎么进
- 下一篇： 问道手游洛书有什么用