[RN] the best way to react-native FlatList achieve the selected list (refresh specified Item)

Results are as follows:

 

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

FIG After the network request is completed, each data is added to a select state:

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

 

fetchList (Page) {
         IF (Page == . 1 &&! the this .state.refreshing) { 
            Toast.loading ( ' Loading ' , 0 ) 
        } 
        Fetch.postFetch (API.homeList, Page {}). the then (Data => {
             // this is a core code 
            data.list.forEach (Item => Item. SELECT = to false );
             IF ( . 1 == Page) {
                 the this .setState ({ 
                    the 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());
            }
        })
    };

 

Then that render FlatList

< FlatList 
    style = {} styles.flatList 
    Data = {the listData}
     // This is the unique id of the data sources without manually generated when their mode + "1" is transferred to the int type key is needed because the string type string
     / / keyExtractor = {(Item, index) => (+ index '. 1')} 
    keyExtractor = = {Item> item.id} 
    renderItem = {(Item {,} index) => (
         < Item 
            Item = {} Item
             SELECT {Item =. SELECT } 
            the onPress = {() => the this .changeSelect (index, Item. SELECT )}
         />  )
    }
/>

 

Then there is Item update needs to be done to render judgment, and shouldComponentUpdatethe key is designated rendering

Export default  class Item {the extends the Component 

    shouldComponentUpdate (nextProps, NextState) { 
        return ( the this .props.item = nextProps.item ||! the this .props. SELECT = nextProps!. SELECT ); 
    } 

    the render () { 
        // here I the other layout file is omitted 
        the console.log ( ' item the render ' )   // here can see each item change is specified only refresh item 
        const {} = item the this .props;
             return (
                 <TouchableOpacity style = {Styles } = {the onPress .container  the 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>
            );
    }
}

Here also suggested that written in this way, simple (written string template for ES6)

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

 

Reference Source:

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