自己动手封装一个React Native多级联动
夹谷成龙
本文向大家介绍自己动手封装一个React Native多级联动，包括了自己动手封装一个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 (
<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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
类似资料：
-
现在我们已经讲解完了基础知识，是时候实现一个真正的的 调试器的时候了。当微软开发 windows 的时候，他们增加了一 大堆的令人惊喜的调试函数以帮助开发者们保证产品的质量。我 们将大量的使用这些函数创建你自己的纯 python 调试器。有一点很重要，我们本质上是在深入的学习 PyDbg(Pedram Amini’s )的使用，这是目前能找到的最简洁的 Windows 平台下的 Python 调试
-
当我们的网站运行在线上的时候，我们可能希望记录一下访问者的 IP 地址，以及一些其他操作，比如说敏感操作。这一小节，我们就来完成它，不过我这里完全是抛砖引玉，这里存储日志的地方是本地的文件夹，你大可以存放到数据库中，或者其他服务器提供商存储空间里面，比如 LeanCloud、FireBase 等等。 2.5.1 初始化项目 mkdir ep && cd ep npm init -y npm i
-
一个人选用一个语言的理由可能是很少的，比如觉得开发效率高，觉得适合做网页，需求要求，或者甚至只因为作者长得帅；想要造一个语言的理由就比较多了，比如觉得xx语言写起来太麻烦，xx语言不安全，xx语言太慢，xx语言的风格不符合自己的审美等等 最早产生这个想法是09年，看完python的源码剖析后感觉编译原理里面的一些东西串起来了，其实大学就学过，只不过那时候大部分时间用来学lex和yacc怎么用，结果
-
本文向大家介绍自己动手写一个java版简单云相册，包括了自己动手写一个java版简单云相册的使用技巧和注意事项，需要的朋友参考一下 动手写一个java版简单云相册,实现的功能是： 用户可以一次上传一个至多个文件。 用户可以下载其他人上传的图片。 用户可以查看其他所有人的图片。 用户只能删除通过自己IP上传的图片。 用到的技术： 文件上传下载、设计模式、Dom4j、xPath等。 先看下2个页面：
-
本文向大家介绍封装属于自己的JS组件，包括了封装属于自己的JS组件的使用技巧和注意事项，需要的朋友参考一下 一、扩展已经存在的组件 1、需求背景 很多时候，我们使用jquery.ajax的方式向后台发送请求，型如 这种代码太常见了，这个时候我们有这样一个需求：在自己调用ajax请求的时候，我们不想每次都写error:function(e){}这种代码，但是我们又想让它每次都将ajax的
-
本文向大家介绍分享一个自己动手写的jQuery分页插件，包括了分享一个自己动手写的jQuery分页插件的使用技巧和注意事项，需要的朋友参考一下 工作需要一个JS分页插件，心想自己动手写一个吧，一来上网找一个不清楚代码结构的，出了问题难以解决，而且网上的插件所包含的功能太多，有些根本用不到，就没必要加载那段JS，二来想起没写过jQuery插件，就当练一下手了，好了，先看结果： http://demo