React Native实现仿天猫商品分类页面

 
 

  
  
React Native实现仿天猫商品类目列表

  
  
前段时间在群里有人问我，类似天猫类目分类这种列表怎么实现，其实这个类目不算复杂，只要清楚这两个列表之间的关系，选择好相应的组件，开发起来还是挺简单的，只是在开发中也有几个需要注意的小细节处理

  
  
效果图预览

  
  


   
   


    
    


    
    

     
     
    
    

   
   

   
   

    
    gif
   
   

  
  

  
  
Demo地址

  
  
https://github.com/guangqiang-liu/react-native-categoryListDemo

  
  
注意事项

  
  
根类目点击时，当类目列表超过一屏时，需要滚动到列表的顶部，并且也需要将右边的分类列表滚动到顶部，天猫的目录就是这种效果
控制页面的渲染时机，如果数据量很大，建议单独做些优化
FlatList和SectionList数据源的组装
列表偏移量处理


  
  
核心源码

  
  
<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}
        />

  
  
// 设置列表的偏移量
_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地址(按照企业开发标准搭建框架完成开发的)：https://github.com/guangqiang-liu/OneM 欢迎小伙伴们 star
作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
作者整理的React Native 学习视频大礼包：https://pan.baidu.com/s/1kVcgUzl 提取码：ina5  有需要的小伙伴请拿走不谢
最后强调：开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群，在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！
 
 

作者：光强_上海
链接：http://www.jianshu.com/p/510f51fdf032
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。