native封装卡片 react_自己动手封装一个React Native多级联动
背景
肯定是最近有一個項目，需要一個二級聯動功能了！
本來想封裝完整之后，放在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 (
options={this.state.options}
defaultIndexs={this.state.defaultIndexs}
onChange={this.onChange.bind(this)}
onOk={this.onOk.bind(this)}>
)
}
}
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 (
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}>確認
)
}
}
選擇項組的拼裝是核心功能，單獨提出一個函數(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)為選中第二級的第三項
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
})
return (
selectedValue={value}
style={{ flex: 1 }}
mode="dropdown"
onValueChange={this.onValueChange}>
{Items}
)
}
}
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
})
return (
selectedValue={value}
style={{ flex: 1 }}
mode="dropdown"
onValueChange={this.onValueChange}>
{Items}
)
}
}
// 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選中選項改變時回調函數
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}>確認
)
}
}
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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
總結
以上是生活随笔為你收集整理的native封装卡片 react_自己动手封装一个React Native多级联动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 斯库尔德维特山洞怎么进
- 下一篇： oracle 运营维护_oracle运维