美文网首页React-Native之跃
React-Native之SectionList

React-Native之SectionList

作者: 因幡白兔 | 来源:发表于2017-09-25 22:11 被阅读313次

    写这篇文章的起因是项目中遇到了级联列表的需求,而RN里面又没有这种写好的Demo,看江清清大神的博客发现是ListView的版本并且没有实现内部购物车的功能,所以我决定写一个用FlatList+SectionList来完成的级联列表,UI是仿照饿了么来搭建的。
    (别和我说修改源码!戒了!)
    下面介绍下SectionList:

     <SectionList renderItem={({item}) => <ListItem title={item.title} />}
     renderSectionHeader={({section}) => <Header title={section.key} />}
     sections={[ 
     // 不同section渲染相同类型的子组件
     {data: [...], title: ...},
     {data: [...], title: ...},
     {data: [...], title: ...}, ]}/>
    
     <SectionList sections={[ 
     // 不同section渲染不同类型的子组件
     {data: [...], renderItem: ...},
     {data: [...], renderItem: ...},
     {data: [...], renderItem: ...}, ]}/>
    

    这里需要注意的点:
    1.renderSectionHeader里面的参数必须是{section},不然无效。
    2.renderItem里面的参数必须是{item},不然无效。
    3.后台返回的json数据格式必须是data+title这种,开始还很疑惑不规定格式下是如何找到是哪行的。
    4.key如果没有加的话会出现数据加载不出的问题(虽然我没出现过)。为了安全起见我加了key并且给sectionList加了keyExtractor。

    简单的介绍下常用属性:

    Data:数据源 ,目前只支持基本的数组类型,需要加载其它特殊的数据结构  那么需要使用VirtualizedList(这货就是FlatList和sectionList的原型)  
    
    renderItem:行内容,可以在此属性内布局cell样式,记住参数为{item}
    
    ListHeaderComponent: 头部组件
    
    ListFooterComponent:尾部组件
    
    onViewableItemsChanged:在可见行元素变化时调用(我是用在滑动列表的时候来让级联列表左边的FlatList的item进行改变)
    
    getItemLayout:类似于iOS原生里面的预估高度,前提是你可以提前知道内容的高度。如果你的行高是固定的,getItemLayout用起来就既高效又简单,类似下面这样:  
    getItemLayout={(data, index) => ( {length: 行高, offset: 行高 * index, index} )}如果有分割线记得也一并加上!
    
    SectionSeparatorComponent:分割线
    

    然后介绍下常用方法:

    scrollToLocation:参数中的sectionIndex无效(不知道是不是bug) 需要移动位置就用itemIndex好了。viewPosition:0(最顶端)0.5(中间)1(最底端)
    

    代码:(以下出自网络)

    import React, { Component } from 'react';
    import {
      AppRegistry,
      View,
      Text,
      SectionList,
    } from 'react-native';
    class HomeScreen extends React.Component {
    
     constructor(props) {
       super(props);
     }
    
     _renderItem = (info) => {
     var txt = '  ' + info.item.title;
     return <Text style={{ height: 60, textAlignVertical: 'center',backgroundColor: "#ffffff", color: '#5C5C5C', fontSize: 15 }}>{txt}</Text> }
     _sectionComp = (info) => {
    var txt = info.section.key;
    return <Text
      style={{ height: 50, textAlign: 'center', textAlignVertical: 'center', backgroundColor: '#9CEBBC', color: 'white', fontSize: 30 }}>{txt}</Text> }
      render() {
       var sections = [
      { key: "A", data: [{ title: "阿童木" }, { title: "阿玛尼" }, { title: "爱多多" }] },
      { key: "B", data: [{ title: "表哥" }, { title: "贝贝" }, { title: "表弟" }, { title: "表姐" }, { title: "表叔" }] },
      { key: "C", data: [{ title: "成吉思汗" }, { title: "超市快递" }] },
      { key: "W", data: [{ title: "王磊" }, { title: "王者荣耀" }, { title: "往事不能回味" },{ title: "王小磊" }, { title: "王中磊" }, { title: "王大磊" }] },
    ];
    
    return (
      <View style={{ flex: 1 }}>
        <SectionList
          renderSectionHeader={this._sectionComp}
          renderItem={this._renderItem}
          sections={sections}
          ItemSeparatorComponent={() => <View><Text></Text></View>}
          ListHeaderComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={{ fontSize: 18, color: '#ffffff' }}>通讯录</Text></View>}
          ListFooterComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={{ fontSize: 18, color: '#ffffff' }}>通讯录尾部</Text></View>}
        />
      </View>
    );
     }
    }
    AppRegistry.registerComponent('App', () => HomeScreen);
    

    相关文章

      网友评论

        本文标题:React-Native之SectionList

        本文链接:https://www.haomeiwen.com/subject/zyzdextx.html