React-Native 填坑之ListView(item更新)

一 背景

效果图如下:

这里写图片描述

二 解决办法
我的目的是实现单选item,正常情况设置一个state变量来保存选中的Index,在每次点击item的时候改变index就OK!但是,我想的太天真了。this.setState()只能渲染外部组件,而ListView子组件却没有渲染。仔细想想确实有道理,像anroid要改变item,还得调用adapter.notifyDataSetChanged(),所以,这里的原理也差不多。知道问题所在,就好解决了,这里只需要改变ListView的数据源,然后在每次调用的时候再配置给ListView,那么它就会重新去渲染了。

具体代码如下:

  /***数据源**/getListData() {var dataSource = [{"bankId": 1,"bankName": "建设银行","bankType": "存储卡","bankNum": "**** **** **** 5745","code": "jsyh"},{"bankId": 2,"bankName": "工商银行","bankType": "存储卡","bankNum": "**** **** **** 5845","code": "gsyh"}];return dataSource;}/**
*点击Item时调用的方法
**/onPressRow(rowData, sectionID, rowID) {let newData = this.getListData();newData[rowID].isSelected = !newData[rowID].isSelected;//重点在这里,给数据源动态添加一个isSelected属性。this.setState({selectIndex: rowData.bankId,dataSource: this.state.dataSource.cloneWithRows(newData)});}

注意
上面的方法只适合静态数据,如果是从网上加载的数据,还是不能解决浅拷贝问题,可以使用第三方库lodash来解决,npm地址:https://www.npmjs.com/package/lodash
使用方法:

import _ from 'lodash';//导入
let newData =_.cloneDeep(this.data);//这里就是关键了,深拷贝

三 结束语

当然这种情况解决办法有很多,网上提供了些更好的方法,我这里只是拙见,希望大家多多提意见。另外,React Native之旅坑很多,选择这条路,注定要不断的跳,不断的填,希望大家坚持。谢谢各位!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/419353.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

1.表单验证插件Validation2.表单插件Form3.动态事件绑定插件livequery可以为后来的元素绑定事件类似于jQuery中的live()方法4.jQuery UI5.jQuery Cookie6.遮罩层插件:thickbox7.编写jQuery插件<1>编写插件的目的&#xff1a;给已经有的一些列方法或函数做一个封装&#x…

React Native 实现物流进度信息

1.实现效果 2.直接上代码 use strict; import React, {Component} from react; import {View, StyleSheet, Text, Dimensions} from react-native export default class Button extends Component {render() {let invoice [{id: 111, content: 已签收,签收人&#xff1a;门…

String中intern的方法

intern public String intern() 返回字符串对象的规范化表示形式。 一个初始时为空的字符串池&#xff0c;它由类 String 私有地维护。 当调用 intern 方法时&#xff0c;如果池已经包含一个等于此 String 对象的字符串&#xff08;该对象由 equals(Object) 方法确定&#xff0…

Vue创建递归树组件(点击可展开关闭)

本篇文章借鉴于此处&#xff0c;如果只需显示树形组件&#xff0c;可以直接访问该博主文章。我这里对他的组件做了扩展&#xff0c;增加了点击展开和关闭操作&#xff0c;话不多说上代码。 1.数据结构 const data {label: 根目录,children: [{label: 目录A,children: [// 叶…

实战CGLib系列之proxy:方法拦截MethodInterceptor

一、首先说一下JDK中的动态代理&#xff1a; JDK中的动态代理是通过反射类Proxy以及InvocationHandler回调接口实现的&#xff0c;但是&#xff0c;JDK中所要进行动态代理的类必须要实现一个接口&#xff0c;也就是说只能对该类所实现接口中定义的方法进行代理&#xff0c;这在…

聊聊并发(四)——深入分析ConcurrentHashMap

转载自&#xff1a;http://www.infoq.com/cn/articles/ConcurrentHashMap 术语定义 术语 英文 解释哈希算法hash algorithm是一种将任意内容的输入转换成相同长度输出的加密方式&#xff0c;其输出被称为哈希值。哈希表hash table根据设定的哈希函数H(key)和处理冲突方法将一组…

布点算法的原理和实现

在数据可视化的过程中&#xff0c;绘制网络拓扑图是很重要的&#xff0c;它能清晰呈现一个复杂网络的结构&#xff0c;节点的重要性和关系。比如下面几张图&#xff1a; 下面这张图是我的软件绘制的&#xff1a; 这些都有一个共同的问题&#xff0c;就是如何让图绘制的更加美观…

Nginx是什么?

一、介绍 Nginx是一个高性能的HTTP和反向代理服务器&#xff0c;也是一个IMAP/POP3/SMTP代理服务器。 Nginx是一款轻量级的Web服务器/反向代理服务器以及电子邮件代理服务器&#xff0c;并在一个BSD-like协议下发行。由俄罗斯的程序设计师lgor Sysoev所开发&#xff0c;供俄国大…

Spring中拦截/和拦截/*的区别 - 不能访问到返回的JSP - 访问静态资源(jpg,js等)

最近碰到了一个spring的web.xml无法跳转到index.html页面的小问题&#xff0c;查了之后从下面这篇文章中受益&#xff0c;特此转发&#xff0c;谢谢&#xff01;&#xff01;&#xff01; 一、我们都知道在基于Spring的Application中&#xff0c;需要在web.xml中增加下面类似的…