效果如下：

核心思路就是往数据源里面 给每条数据加一个选中状态.

如图在网络请求完成之后，给每条数据添加一个select的状态:

data.list.forEach(item => item.select = false);

fetchList(page) {

if (page == && !this.state.refreshing) {

Toast.loading('加载中', )

}

Fetch.postFetch(API.homeList, { page }).then(data => {

// 这一句是核心代码

data.list.forEach(item => item.select = false);

if ( == page) {

this.setState({

listData : data.list,

total : data.info.total,

page : page + ,

refreshing : false,

}, () => Toast.hide())

} else {

const oldData = this.state.listData;

this.setState({

listData : oldData.concat(data.list),

total : data.info.total,

page : page + ,

loadingMore : false,

}, () => Toast.hide());

}

})

};

然后就是render FlatList

style={styles.flatList}

data={listData}

// 这是一种数据源没有唯一id的时候自己手动生成的方式 +"1" 是为了把int类型转string 因为key是需要string类型

// keyExtractor={(item, index) => (index + '1')}

keyExtractor={item => item.id}

renderItem={({ item, index }) => (

item={item}

select={item.select}

onPress={() => this.changeSelect(index, item.select)}

/>)

}

/>

然后就是 Item 里面 需要做渲染更新判断了,shouldComponentUpdate是指定渲染的关键

export default class Item extends Component {

shouldComponentUpdate(nextProps,nextState){

return (this.props.item != nextProps.item || this.props.select != nextProps.select);

}

render() {

// 这里我就把其他布局文件省略了

console.log('item render ') // 从这里可以看到 每次改变item是，只刷新了指定item

const { item } = this.props;

return (

{

item.select ?

:

}

);

}

}

这里更建议用这种写法，简洁(ES6的写法 字符串模板)

参考来源：

https://www.jianshu.com/p/437a195e4f14

[RN] React Native FlatList 选中后 状态没有立即发生改变，而在下一次生效的问题

React Native FlatList 选中后 状态没有立即发生改变,而在下一次生效的问题 解决关键: 给 FlatList 添加 extraData={this.state} 非常关键,如果不设 ...

[RN] React Native FlatList跳转到顶部/底部

React Native FlatList跳转到顶部/底部 核心代码如下:

[RN] React Native 实现图片预览

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

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

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

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

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

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

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

[RN] React Native 幻灯片效果 Banner

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

[RN] React Native 常用命令行

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

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

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

随机推荐

《Dive into Python》Chapter 2 and Chapter 3 笔记

Example 2.1. odbchelper.py def buildConnectionString(params): """Build a connection s ...

好用的JQ图片特效jquery-poptrox-popup-galleries

jQuery Poptrox – Popup galleries     Rate this (1 Vote) Download   Demo jQuery Poptrox Adds popup ga ...

jquery 访问控制菜单

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHpqOTExOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

poj3270Cow Sorting(置换+贪心)

Cow Sorting Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7587   Accepted: 2982 Descr ...

基于三层架构的增删改查Get知识点

给DataGridView控件绑定datatable数据源之后总是会多一行,在属性里修改属性allowuserToaddrow值为false即可 不可编辑状态是设置成只读状态即可,英文属性readon ...

Kafka知识总结

1.kafka是什么 类JMS消息队列,结合JMS中的两种模式,可以有多个消费者主动拉取数据,在JMS中只有点对点模式才有消费者主动拉取数据. kafka是一个生产-消费模型. Producer:生产 ...

java第11周

1.JPQL查询 JPQL全称Java Persistence Query Language 基于首次在EJB2.0中引入的EJB查询语言(EJB QL),Java持久化查询语言(JPQL)是一种可移 ...

Android.mk学习

2019-03-31 学习变量 $(call my-dir) /usr/bin2/android-ndk-r16/build/core $(CLEAR_VARS) /usr/bin2/android- ...

Mysql 之闪回技术 binlog2sql

1.下载 https://github.com/danfengcao/binlog2sql http://rpmfind.net Search: python-pip pip 是一个Python包管理 ...

eclipse代码中每行的开始和结尾出现多余的特殊符号

window -> preferences -> general -> editors -> text editors ->          show whitespa ...