reactNative 踩坑ListView没有重新渲染的问题
最近在使用ListView 做一个列表全选单选功能其中发现选中列表下改元素但是state没有发生改变,此时发现是组件没有重新渲染 解决方案如下:import React, { Component } from 'react';import {StyleSheet,View,TouchableOpacity,Dimensions,ListView,Text,Image...
·
最近在使用ListView 做一个列表全选单选功能其中发现选中列表下改元素但是state没有发生改变,此时发现是组件没有重新渲染 解决方案如下:
import React, { Component } from 'react';
import {
StyleSheet,
View,
TouchableOpacity,
Dimensions,
ListView,
Text,
Image,
Platform,
} from 'react-native';
export default class SelectPeople extends React.Component {
constructor(props) {
super(props);
let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.state = {
dataSource: ds.cloneWithRows([]),
isChecked: false,
isAllSelect: false,
selectMap: new Map(),
ds: ds //在此处定义ds (具体看官方文档)
};
this.list = [
{
employeeId: "66034821",
name: "黄擎一",
userId: "66034821",
selected: false
},
{
employeeId: "6622777",
name: "赵染",
userId: "6622777",
selected: false
},
{
employeeId: "8860833",
name: "朱琛",
userId: "8860833",
selected: false
}
]
}
componentDidMount() {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.list)
})
}
selectItem = (key, value, isChecked) => {
在此对数据源重新处理
let dataList = JSON.parse(JSON.stringify(this.list))
this.setState({
dataSource: this.state.dataSource.cloneWithRows(dataList)
})
}
render() {
return (
<View style={styles.container}>
<ListView
renderRow={this.renderRow} //此处cell
dataSource={this.state.dataSource}
enableEmptySections={true}
>
</ListView>
</View>
);
}
}
更多推荐


所有评论(0)