React Native 实现 多选标签

效果如下:

实现代码:

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

转载请著名出处!谢谢~~

[RN] React Native 实现 多选标签的更多相关文章

  1. [RN] React Native 下实现底部标签(支持滑动切换)

    上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...

  2. [RN] React Native 下实现底部标签(不支持滑动切换)

    底部标签是现在App的基本菜单实现 下面分别用 createBottomTabNavigator 和 createMaterialBottomTabNavigator 两种方法分别实现底部菜单 但此两 ...

  3. [RN] React Native 实现图片预览

    [RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...

  4. [RN] React Native 常见基本问题归纳总结

    [RN] React Native  常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...

  5. [RN] React Native 关闭所有黄色警告

    [RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...

  6. [RN] React Native 幻灯片效果 Banner

    [RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...

  7. [RN] React Native 常用命令行

    [RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...

  8. [RN] React Native 实现 类似QQ 登陆页面

    [RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...

  9. React Native 系列(九) -- Tab标签组件

    前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...

随机推荐

  1. 【转】ubuntu16.04安装Vivado 2017.4 教程

    ubuntu16.04安装Vivado 2017.4 教程 2017-12-28 20:59:48 wmyan 阅读数 11794   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协 ...

  2. 使用GitHub的仓库以及介绍

    一.创建仓库 假如Responsitory name是Hello-World Description一栏中可以设置仓库的说明. Public, Private  在这一栏可以选择Public还是Pri ...

  3. snap应用多版本卸载

    Ubuntu18.04新增了几个内置软件使用Snap格式.同样的沙箱式处理方式,除了Canonical主推的Snap,还有Fedora的Flatpak和AppImage.一般正常使用没问题,就是第一次 ...

  4. SkyWalking6.2.0版本UI参数、告警参数、指标含义中文解释

    一.告警规则相关参数 二.SkyWalking UI相关参数CPM:每分钟请求调用的次数SLA: 服务等级协议(简称:SLA,全称:service level agreement).是在一定开销下为保 ...

  5. vue cli 3 那些事儿

    配置 eslint 可在 package.json 中的 eslintConfig 中配置,比如允许在代码中使用 console,package.json 中配置如下 ... "eslint ...

  6. 关于toLocaleString(), toString(), valueOf()方法的使用

    所有对象都是具有toLocalString(), toString(), valueOf()三种方法的,此篇博客主要是讲述其在Array引用类型上的使用. 基本使用 调用valueOf()返回的是数组 ...

  7. EF启程--概念理解(数据库连接)

    简介:Entity Framework 是一种支持 .NET 开发人员使用 .NET 对象处理数据库的对象关系映射程序 (O/RM). 它不要求提供开发人员通常需要编写的大部分数据访问代码. 其中有E ...

  8. json时间格式化

    //格式化日期字符串 String.prototype.jsonDateFormat = function (format) { var date, timestamp, dtObj timestam ...

  9. 数据库-io检测工具sqldeveloper-18.2.0.183.1748-x64 下载链接

    链接:https://pan.baidu.com/s/1R0ujc_9aXdc5O5i1nhNAlA 提取码:o6is

  10. springmvc上传图片到Tomcat虚拟目录

    一.简介 通过把文件上传到tomcat的虚拟目录,实现代码和资源文件分开. 二.环境 spring+springmvc+mybatis 三.代码实现 1.导入文件上传的jar <dependen ...