React Native實現(xiàn)仿天貓商品類目列表
前段時間在群里有人問我抱慌，類似天貓類目分類這種列表怎么實現(xiàn)梅尤，其實這個類目不算復(fù)雜，只要清楚這兩個列表之間的關(guān)系姑隅，選擇好相應(yīng)的組件伞梯，開發(fā)起來還是挺簡單的玫氢，只是在開發(fā)中也有幾個需要注意的小細節(jié)處理
效果圖預(yù)覽
gif
Demo地址
https://github.com/guangqiang-liu/react-native-categoryListDemo
注意事項
- 根類目點擊時，當(dāng)類目列表超過一屏?xí)r谜诫，需要滾動到列表的頂部漾峡，并且也需要將右邊的分類列表滾動到頂部，天貓的目錄就是這種效果
- 控制頁面的渲染時機猜绣，如果數(shù)據(jù)量很大灰殴，建議單獨做些優(yōu)化
- FlatList和SectionList數(shù)據(jù)源的組裝
- 列表偏移量處理
核心源碼
<FlatList
ref={flatList => this._flatList = flatList}
data={data}
ListHeaderComponent={() => (<View/>)}
ListFooterComponent={() => (<View/>)}
ItemSeparatorComponent={() => <View style={{height:1, backgroundColor:'#F5F5F5'}}/>}
renderItem={this._renderItem}
onEndReachedThreshold={20}
showsVerticalScrollIndicator={false}
>
</FlatList>
<SectionList
ref={(ref) => this._sectionList = ref}
renderSectionHeader={this.sectionComp}
renderItem={(data) => this.renderItem(data)}
sections={tempArr}
ItemSeparatorComponent={() => <View/>}
ListHeaderComponent={() => <View/>}
ListFooterComponent={() => <View/>}
showsVerticalScrollIndicator={false}
keyExtractor={(item, index) => 'key' + index + item}
/>
// 設(shè)置列表的偏移量
_renderItem = item => {
let index = item.index
let title = item.item.title
return (
<TouchableOpacity
key={index}
style={[{alignItems: 'center', justifyContent: 'center', width: 100, height: 44}, this.state.selectedRootCate === index ? {backgroundColor: '#F5F5F5', borderLeftWidth: 3, borderLeftColor: 'red'} : {backgroundColor: 'white'}]}
onPress={() => {
(CateData.data.length - index) * 45 > height - 65 ? this._flatList.scrollToOffset({animated: true, offset: index * 45}) : null
this._sectionList.scrollToLocation({itemIndex: 0, sectionIndex: 0, animated: true, viewOffset: 20})
this.setState({selectedRootCate: index})
}}
>
<Text style={{fontSize: 13, color: this.state.selectedRootCate === index ? 'red' : '#333'}}>{title}</Text>
</TouchableOpacity>
)
}
更多文章
- 作者React Native開源項目OneM【500+ star】地址(按照企業(yè)開發(fā)標(biāo)準(zhǔn)搭建框架完成開發(fā)的)：https://github.com/guangqiang-liu/OneM：歡迎小伙伴們 star
- 作者簡書主頁：包含60多篇RN開發(fā)相關(guān)的技術(shù)文章http://www.reibang.com/u/023338566ca5 歡迎小伙伴們：多多關(guān)注，多多點贊
- 作者React Native QQ技術(shù)交流群：620792950 歡迎小伙伴進群交流學(xué)習(xí)
- 友情提示：在開發(fā)中有遇到RN相關(guān)的技術(shù)問題掰邢，歡迎小伙伴加入交流群（620792950）牺陶，在群里提問、互相交流學(xué)習(xí)辣之。交流群也定期更新最新的RN學(xué)習(xí)資料給大家掰伸，謝謝大家支持！
小伙伴們掃下方二維碼加入RN技術(shù)交流QQ群
QQ群二維碼怀估，500+ RN工程師在等你加入哦
