react native下拉二级菜单功能实现

效果

实现思路

首先实现点击左侧数据，然后获取对应index，根据index显示对应的右侧数据
数据结构：

const data1 = [
	{
		"All": ["All"],
	},
	{
		"Education class": [
			"All",
			"Tutor",
			"Teaching assistant"
		],
	}
	, {
		"Internet classes": [
			"All",
			"Tutor",
			"Technology",
			"Product",
			"Operating",
			"Design"
		]
	}, {
		"Campus class": [
			"All",
			"Internship",
			"The campus"
		]
	}, {
		"Service class": [
			"All",
			"The waiter",
			"Customer service",
			"Food delivery",
			"Courier"
		]
	}, {
		"Market class": [
			"All",
			"Send a single",
			"Sweep the yard",
			"Sales promotion",
			"Sales"
		]
	}, {
		"Writing class": [
			"All",
			"Translation",
			"Clerk",
			"Planning",
			"The editor"
		]
	}, {
		"Action class": [
			"All",
			"The performance",
			"Etiquette",
			"Model",
			"Host",
			"Security"
		]
	}, {
		"Other": [
			"All",
			"Volunteers",
			"Temporary workers",
			"Accounting",
			"Other"
		]
	}

];

初始化数据：

	//初始化state
		this.state = {
			leftData: [],
			rightData: [],
			leftIndex: 0,
			rightIndex: 0
		};
UNSAFE_componentWillMount = () => {
		//初始化数据
		let leftData = []
		let rightData = []
		for (let i = 0; i < data.length; i++) {
			leftData.push(Object.keys(data[i])[0])
			// console.log('iiii', leftData)
			rightData.push(Object.values(data[i])[0])
			// console.log('iiii', rightData)
			this.setState({
				leftData: leftData,
				rightData: rightData
			})
		}
	}

渲染数据 --左边数据

<View
					style={{
						width: '40%',
						backgroundColor: '#F4F4F4',
					}}
				>
					{this.state.leftData.map((item, index) => {
						return (
							<TouchableOpacity
								onPress={() => {
									// 当左边发生变化时，右边的值就变成第一个
									if (this.state.leftIndex != index) {
										this.setState({
											leftIndex: index,
											rightIndex: 0
										})
									}
								}}
								style={{
									width: '100%',
									height: scaleSizeH(30),
									paddingLeft: scaleSizeH(30)
								}}
							>
								<Text
									style={{
										// 控制点击变色
										color: this.state.leftIndex === index ? '#FEE734' : '#333333',
										fontSize: setSpText(12),
									}}
								>{item}</Text>
							</TouchableOpacity>
						)
					})}
				</View>```
**渲染数据  --左边数据**

```javascript
<View
					style={{
						width: '60%',
						backgroundColor: '#FFFFFF',
					}}
				>
					{this.state.rightData[this.state.leftIndex].map((item, idx) => {
						return (
							<TouchableOpacity
								onPress={() => {
									if (this.state.rightIndex === 0) {
										this.setState({
											chosedType: this.state.rightData[this.state.leftIndex][0],
											rightIndex: 0,
										}, () => {
											console.log('chosedType', this.state.chosedType)
										})
									} else {
										this.setState({
											chosedType: item,
											rightIndex: idx,
										}, () => {
											console.log('chosedType', this.state.chosedType)
										})
									}
									this.setState({
										chosedType: item,
										rightIndex: idx,
									}, () => {
										console.log('chosedType', this.state.chosedType)
									})
								}}
								style={{
									width: '100%',
									height: scaleSizeH(30),
									paddingLeft: scaleSizeH(60)
								}}
							>
								<Text
									style={{
										// 控制点击变色
										color: this.state.rightIndex === idx ? '#FEE734' : '#333333',
										fontSize: setSpText(12),
									}}
								>{item}</Text>
							</TouchableOpacity>
						)
					})}
				</View>

目前为止，数据渲染完成，然后实现点击tab栏，然后使菜单出现与消失，这时借助model，把渲染数据部分的代码封成一个组件MenuList.js

this.state = {
			//控制model是否可见
			modalVisible: false,}
//modal出现与消失的方法
setModalVisible(visible) {
		this.setState({ modalVisible: visible });
	}
//点击出现model
<TouchableOpacity
    onPress={() => {
  this.setModalVisible(true);}}>
<Text>Type</Text>
</TouchableOpacity>	

//点击隐藏model
<TouchableOpacity
    onPress={() => {
  this.setModalVisible(false);}}>
<Text>Type</Text>
</TouchableOpacity>	
//model设置
<Modal
       animationType="fade"
	   transparent={true}
	   visible={this.state.modalVisible}
	onRequestClose={() => {
		alert("Modal has been closed.");
	}}>
< MenuList data={data1} />
</Modal>

					

以上就可以实现二级菜单的制作了