[RN] 반응 네이티브 FlatList 선택한 목록 (새로 지정된 아이템)을 달성하기 위해 가장 좋은 방법

결과는 다음과 같습니다 :

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

네트워크 요청이 완료된 후도, 각 데이터가 선택 상태에 추가된다 :

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

fetchList (페이지) {
         경우 (페이지 == 1 &&! 이 .state.refreshing) { 
            Toast.loading ( ' 加载中' , 0 ) 
        } 
        Fetch.postFetch (API.homeList {} 페이지). 다음 (데이터 => {
             // 这一句是核心代码 
            data.list.forEach (항목 => 항목. 선택 = 거짓 ),
             경우 ( 1 ==의 페이지) {
                 이 .setState ({ 
                    되는 listData : data.list, 
                    합계 : data.info.total ,
                    페이지 : 페이지  +1 , 
                    상쾌한 : 거짓 , 
                } () => Toast.hide ()) 
            } 다른 {
                 CONST oldData = 이 .state.listData;
                이 .setState ({ 
                    되는 listData : oldData.concat (data.list) 
                    총 : data.info.total, 
                    페이지 : 페이지 + 1 , 
                    loadingMore : 거짓 , 
                } () => Toast.hide ()); 
            }
        }) 
    };

그런 다음이 FlatList 렌더링

< FlatList 
    스타일 = {} styles.flatList 
    데이터 = {되는 listData이}
     // 자신의 모드 + "1"필요한 INT 타입 키에 전송 될 때 수동으로 생성하지 않고이 데이터 소스의 고유 ID 때문에 문자열 타입 캐릭터
     / / keyExtractor = {(아이템, 인덱스) => (+ 인덱스 '. (1'))} 
    keyExtractor = {항목> item.id} 
    renderItem = {(아이템 {} 인덱스) => (
         < 상품 
            아이템 = {} 아이템
             SELECT 아이템 = {. SELECT } 
            된 onPress = {() => 이 본 .changeSelect (인덱스 아이템. SELECT )}
         /> )
    }
 />

그런 다음이 항목 업데이트가 판단을 렌더링하기 위해 수행 될 필요가 있으며, shouldComponentUpdate키는 렌더링 지정

수출 기본  클래스 항목 {(가) 구성 요소 확장 

    shouldComponentUpdate을 (nextProps, NextState) { 
        반환 ( 다음은이 .props.item = nextProps.item ||! 다음은이가 .props. SELECT nextProps가! = 선택 ); 
    } 

    {)을 (렌더링 
        // 여기 다른 레이아웃 파일은 생략 
        합니다 (CONSOLE.LOG ' 렌더링 항목을 ' )   // 항목 새로 고침에만 지정된 각 항목의 변화를 볼 수 있습니다 여기 
        를 const = 항목 {} 은이가 , .props
             리턴 (
                 <TouchableOpacity 스타일 = {스타일 } = {onPress에 .container 이 본.props.onPress}>
                    { 
                        항목입니다. 선택 ? 
                            <아이콘 이름 = ' oneIcon | icon_check_fill ' 크기 = {FS.ICON} 색상 = {CS.THEME11} /> 
                            :
                             <아이콘 이름 = ' oneIcon | icon_checkBox ' 크기 = {FS.ICON} 색상 = {CS.THEME11} / > 
                    }
                 </ TouchableOpacity> 
            ); 
    } 
}

다음은이 방식으로 작성 제안, 간단한 (ES6 서면 문자열 템플릿)

<아이콘 이름 = {`oneIcon | $ {항목입니다. 선택 ? ' icon_check_fill ' : ' icon_checkBox ' } '} FS.ICON 크기 = {} = {컬러 CS.THEME11} />

참고 자료 :

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

[RN] 반응 네이티브 FlatList 선택한 목록 (새로 지정된 아이템)을 달성하기 위해 가장 좋은 방법

추천