![[RN] React Native 实现 多选标签_小戴BOTAOY演示博客](/style/defalut/img/logo-bold.png){kind=logo}
React Native 实现 多选标签文章地址https://www.yii666.com/article/756333.html文章来源地址:https://www.yii666.com/article/756333.html
效果如下：
![[RN] React Native 实现 多选标签](https://img2018.cnblogs.com/blog/1653347/201906/1653347-20190628014636103-309382480.png)
实现代码：
import React, {Component} from 'react';
import {Button, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
export default class TestMarkCheck extends Component {
static defaultProps = {
multiList: [
{
"id": "",
"name": "音乐",
select: false
},
{
"id": "",
"name": "美术",
select: false
},
{
"id": "",
"name": "舞蹈",
select: false
},
]
};
constructor(props) {
super(props);
this.state = {
multiData: this.props.multiList,
selectMultiItem: [],
}
}
_selectMultiItemPress(item) {
if (item.select) {
this.state.selectMultiItem.splice(this.state.selectMultiItem.findIndex(function (x) {
return x === item.id;
}), );
} else {
this.state.selectMultiItem.push(item.id);
}
this.state.multiData[item.id].select = !item.select;
this.setState({multiData: this.state.multiData});
}
_submitMultiPress() {
alert(`选中了${JSON.stringify(this.state.selectMultiItem)}`)
}
_renderMultiMark() {
let multiData = this.state.multiData;
let len = multiData.length;
let menuArr = [];
for (let i = ; i < len; i++) {
let item = multiData[i];
if (item.select) {
menuArr.push(
<TouchableOpacity
onPress={() => this._selectMultiItemPress(item)} style={[styles.markRow, styles.markChecked]}>
<Text style={styles.markCheckedText}>{item.name}</Text>
</TouchableOpacity>
)
} else {
menuArr.push(
<TouchableOpacity
onPress={() => this._selectMultiItemPress(item)} style={[styles.markRow, styles.markUnCheck]}>
<Text style={styles.markUnCheckText}>{item.name}</Text>
</TouchableOpacity>
)
}
}
return (
<View style={styles.multiBox}>
{menuArr}
</View>
);
}
render() {
return (
<View style={styles.container}>
{this._renderMultiMark()}
<Button title={"确定"} onPress={() => this._submitMultiPress()}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: ,
backgroundColor: "white",
},
multiBox: {
flexDirection: 'row',
alignItems: 'center',
marginTop: ,
marginBottom: ,
paddingLeft: ,
paddingRight: ,
},
markRow: {
width: ,
height: ,
lineHeight: ,
padding: ,
marginBottom: ,
marginRight: ,
borderRadius: ,
borderWidth: 0.5,
},
markChecked: {
backgroundColor: "#aaa",
borderColor: "white",
},
markUnCheck: {
backgroundColor: "white",
borderColor: "#111",
},
markCheckedText: {
fontSize: ,
color: "white",
textAlign: "center",
},
markUnCheckText: {
fontSize: ,
color: "#000",
textAlign: "center",
},
});
成功企业家，五大基本能力：
产品 营销 团队 资本 财务
本博客地址： wukong1688
本文原文地址：https://www.cnblogs.com/wukong1688/p/11062409.html
转载请著名出处！谢谢~~网址:yii666.com