react-native---rnのリストコンポーネント(FlatList)

react-nativeはFlatListコンポーネントを使用してリストレンダリングを行い、data+renderItemを使用してリスト内のセルコンポーネントを構成します.HTML内のul/ol+liに相当します.

FlatList機能:

 -      。
 -         。
 -                 。
 -          、    、              。
 -       、    。
 -         

FlatList属性(コンポーネント):FlatListの一部の属性であり、その値はコンポーネントに関連しているか、関数レンダリングコンポーネントまたは定義済みの静的コンポーネントである.

1. ItemSeparatorComponent //     ，       ，            
2. ListEmptyComponent //     ，data     ，      
3. ListFooterComponent //    
4. ListHeaderComponent //    

FlatListプロパティ(機能):FlatListコンポーネントには、レンダリングデータ、レイアウトなどを設定するためのプロパティもあります.

0. numColumns//          ，    ，    ，  numColumns={3}        

1. columnWrapperStyle //     ，               ,    

2. data //          ，    

3. extraData //data       ，     、        

4. horizontal //    /    ，  bool，true    ，false   ，    false

5.legacyImplementation //   true ，    ListView  

6. refreshing //    ，   true ，   loading  

7. initialScrollIndex//    ，           ，

8.initialNumToRender//            

9. inverted//bool       。    scale     -1。

10. onEndReachedThreshold//  Number ，                    

FlatListプロパティ(関数):

1.getItemLayout

getItemLayout={(data, index) => ( {length:   , offset:    * index, index} )}

/////getItemLayout        ，               ，                 。          ，getItemLayout          .        SeparatorComponent，            offset     。

2.keyExtractor

(item: ItemT, index: number) => string

////         key             ，  react vue       key

3.renderItem

({item,...})=>

////    item，      ，          

4.onEndReached

()=>{}

////                  onEndReachedThreshold  ，     

5.onRefresh

()=>{}

////        ，              RefreshControl  ，    “    ”   。         refreshing  

6.onViewableItemsChanged

({viewableItems: Array, changed: Array})=>{}

////           。                  viewabilityconfig  

FlatListでの方法: