[RN] react-native FlatList 實現列表選中的最佳方式（刷新指定Item）

效果如下：

 

核心思路就是往數據源里面 給每條數據加一個選中狀態.

如圖在網絡請求完成之后，給每條數據添加一個select的狀態:

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

 

fetchList(page) {
        if (page == 1 && !this.state.refreshing) {
            Toast.loading('加載中', 0)
        }
        Fetch.postFetch(API.homeList, { page }).then(data => {
            // 這一句是核心代碼
            data.list.forEach(item => item.select = false);
            if (1 == page) {
                this.setState({
                    listData : data.list,
                    total : data.info.total,
                    page : page + 1,
                    refreshing : false,
                }, () => Toast.hide())
            } else {
                const oldData = this.state.listData;
                this.setState({
                    listData : oldData.concat(data.list),
                    total : data.info.total,
                    page : page + 1,
                    loadingMore : false,
                }, () => Toast.hide());
            }
        })
    };

 

然后就是render FlatList

<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={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 (
                <TouchableOpacity style={styles.container} onPress={this.props.onPress}>
                    {
                        item.select ?
                            <Icon name='oneIcon|icon_check_fill' size={FS.ICON} color={CS.THEME11}/>
                            :
                            <Icon name='oneIcon|icon_checkBox' size={FS.ICON} color={CS.THEME11}/>
                    }
                </TouchableOpacity>
            );
    }
}

這里更建議用這種寫法，簡潔（ES6的寫法 字符串模板）

<Icon name={`oneIcon|${item.select? 'icon_check_fill':'icon_checkBox' }`} size={FS.ICON} color={CS.THEME11}/>

 

參考來源：

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