close
轉自 https://www.jianshu.com/p/e9144208f18f
--
React Native FlatList 選中效果多選
最近寫項目碰到了列表的多選需求,開始我直接用setState並不會直接起作用,只會在改變的item移出渲染區然後重新渲染的時候才會有效果,後來查看文檔才發現有一extraData的參數。需要設置才能在setState之後馬上渲染

效果圖.gif
代碼如下
import React, {Component} from 'react';
import {
Image,
Text,
View,
TouchableHighlight,
FlatList,
StyleSheet,
Button
} from 'react-native';
export default class TestFlatListSelect extends Component {
constructor(props) {
super(props)
this.state = {
data: [{
"id": "0",
select: false
},
{
"id": "1",
select: false
},
{
"id": "2",
select: false
},
{
"id": "3",
select: true
},
{
"id": "4",
select: true
},
{
"id": "5",
select: true
}
],//数据源
selectItem: [],
}
}
_itemPress = (item) => {
console.log(item);
}
_selectItemPress = (item) => {
if (item.select) {
this.state.selectItem.splice(this.state.selectItem.findIndex(function (x) {
return x === item.name;
}))
} else {
this.state.selectItem.push(item)
}
this.state.data[item.id].select = !item.select
// this.state.data=arr.pop()
this.setState({data: this.state.data})
}
_submitPress() {
alert(`选中了${JSON.stringify(this.state.selectItem)}`)
}
render() {
return (
<FlatList
keyExtractor={item => item.id}
data={this.state.data}
extraData={this.state} //这里是关键,如果不设置点击就不会马上改变状态,而需要拖动列表才会改变
ListHeaderComponent={({item}) => {
return (<Button title={"确定"} onPress={_ = () => this._submitPress()}/>)
}}
renderItem={({item}) => {
return (
<TouchableHighlight onPress={ _ => this._itemPress(item)}>
<View style={styles.standaloneRowFront}>
<Image style={{width: 70, marginLeft: 5, height: 70}}
source={{uri: item.thumb}}>
<TouchableHighlight
onPress={_ => this._selectItemPress(item)}>
<View style={{
width: 80,
height: 80,
backgroundColor: item.select ? ("#ff081f") : ("#39a7fc")
}}/>
</TouchableHighlight>
</Image>
<View
style={{marginLeft: 20}}>
<Text>{item.select ? ("选中") : ("未选中")}</Text>
</View>
</View>
</TouchableHighlight>)
}}
/>
);
}
}
const styles = StyleSheet.create({
standaloneRowFront: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#FFF',
height: 70,
marginBottom: 5
},
});```
--
全站熱搜