OnViewableItemsChanged profile

FlatList is a high-performance list component provided by React Native. It has the logic of list Item cache reuse and supports pull-down refresh functions. The onViewableItemsChanged attribute of the FlatList is used in list development, especially when the FlatList is scrolled, to listen for the current items to be visible. Use onViewableItemsChanged to bind to viewabilityConfig.

  • OnViewableItemsChanged: Called when the visible row element changes.
  • Viewabilityconfig: Configures parameters such as visibility range and change frequency.

Viewabilityconfig commonly used configurations are as follows:If viewabilityConfig is not configured, viewabilityConfig has some default property values.

The sample

In the left and right categories list, we will show you how onViewableItemsChanged can refresh the visible list, as shown below.First, we use what’s already encapsulatedAxios toolsPerform data requests, of course, you can also directly use the Fetch tool to request, the request method and parameters are as follows:

async function getGoodCategory() { let url = '/product/good/list-all' let param = { facilityCd: 188, prodCatalogCd: 1201, showInSelect: '1', }; const data = await apiRequest.post(url,param) .... // omit other code}Copy the code

The data structure we need is a list nested list structure, such as:

{"data": {"content": [{"id": "SC_188_5", "catiID ": "GOOD_0"," catiName ": "catiid "," catiimageurl ": "/img/CGV_CMS_1609772871639.png", "goodList": [ { "id": "G_188_935", "productCd": 22318, "productId": "22010322", "productName": "PAC Year of the Tiger New Year Gift package 5", "smallImageUrl": "/img/ cgV_CMS_1643181892747.jpg ", "detailScreen": "PACONNIE Year of the Tiger ", "productCategoryId": "GOOD_0", "categoryName": "CATIID "," Price ": 88.80, "priceWithTax": 106.00, "guidePrice" : 88.80,}}]], "totalElements" : 6}, "code" : 200, the "message" : "OK"}Copy the code

After getting the data, the next is to draw the interface, divided into the left classification list and the right commodity list, the core code is as follows:

const GoodListScreen = ({navigation: {navigate}}) => { let currentCategoryName const sectionListEle = useRef(null) const [goods, setGoods] = useState([]) const [selectedIndex, setSelectedIndex] = useState(0) useEffect(() => { getGoodCategory() }, []) async function getGoodCategory() { let url = '/product/good/list-all' let param = { facilityCd: 188, prodCatalogCd: 1201, showInSelect: '1', }; const data = await apiRequest.post(url,param) setGoods( (data.content).map(({goodList, ... res}, index) => ({ ... res, isHot: index === 0, data: goodList, })), ) } const select = (index) => { if (selectedIndex ! == index) { setSelectedIndex(index) sectionListEle.current.scrollToLocation({ animated: false, itemIndex: 0, sectionIndex: index, viewPosition: 0, }) } } const onViewableItemsChanged = (info) => { const fisrtViewableItem = info.viewableItems[0] if (fisrtViewableItem)  { const {categoryName} = fisrtViewableItem.item if (categoryName ! == currentCategoryName) { const index = goods.findIndex((c) => c.categoryName === categoryName) setSelectedIndex(index) currentCategoryName = categoryName } } } const createGoodOrder = async () => { } function renderShopCart() { return (<ShoppingCartBar style={{height:60}} amount={0} num={0} onPressLeft={() => navigate('MyModal', {screen: 'ShopingCartScreen'})} onPressRight={() => { createGoodOrder() }} />); } function renderLeftList() { return (<View style={styles.leftList}> <FlatList data={goods} renderItem={({item, index}) => ( <Menu item={item} isHot={index === 0} isSelected={index === selectedIndex} select={() => select(index)} /> )} keyExtractor={(item) => item.id} /> </View>); } function renderRightList() { return (<SectionList style={styles.rightList} ref={sectionListEle} onScrollToIndexFailed={() => ({ index: selectedIndex, highestMeasuredFrameIndex: 0, averageItemLength: In 100, })} sections={goods} renderItem={({item}) => ( <GoodItem item={item}/> )} keyExtractor={(item) => item.id} onViewableItemsChanged={onViewableItemsChanged} />); } return goods.length>0 && ( <View style={styles.contain}> <View style={styles.body}> {renderLeftList()} {renderRightList()} </View> {renderShopCart()} </View> ) } const styles = StyleSheet.create({ contain: { flexDirection:'column', flex:1 }, body: { flex: 1, flexDirection: 'row', }, leftList: { width: 72, backgroundColor: '#FBF8FB', }, rightList: { flex: 1, }, title: { backgroundColor: '#fff', padding: 5, }, }) export default GoodListScreen;Copy the code

The core of the above code is to use the FlatList component onViewableItemsChanged to implement the right list change monitoring, the core code is as follows:

const onViewableItemsChanged = (info) => { const firstViewableItem = info.viewableItems[0] if (firstViewableItem) { const {categoryName} = firstViewableItem.item if (categoryName ! == currentCategoryName) { const index = goods.findIndex((c) => c.categoryName === categoryName) setSelectedIndex(index) currentCategoryName = categoryName } } }Copy the code

When clicking the category list on the left, we will call the select property of the Menu component and execute the select method. Since the list on the right uses the onViewableItemsChanged property, the interface will be automatically refreshed when we receive the notification of refreshing. In order to slide the right list and slide the left list, in the onViewableItemsChanged method, we add the following logic.

if (categoryName ! == currentCategoryName) { const index = goods.findIndex((c) => c.categoryName === categoryName) setSelectedIndex(index) }Copy the code

At this point, the left and right list linkage function is realized.