ReactNative 进阶（三十七）：应用 SectionList 实现分组列表

作者：No Silver Bullet

2022 年 1 月 29 日
本文字数：2227 字
阅读完需：约 7 分钟

ReactNative进阶（三十七）：应用 SectionList 实现分组列表

一、SectionList 简述

ReactNative长列表数据组件一共有三个：

ListView 核心组件，数据量大时性能较差，占用内存持续增加，故诞生FlatList组件。
FlatList 用于替代 ListView，支持下拉刷新和上拉加载。
SectionList 高性能的分组列表组件。

其中，SectionList支持下面的常用功能：

完全跨平台；
支持水平布局模式；
行组件显示或隐藏时可配置回调事件；
支持单独的头部组件；
支持单独的尾部组件；
支持自定义行间分隔线；
支持下拉刷新；
支持上拉加载；

1.1 属性集合

1.2 方法集合

二、应用示例

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);

复制代码

三、拓展阅读

官方文档

四、延伸阅读 Android ndk abiFilters 详解

4.1 前言

Android 系统本质是一个经过改造的 Linux 系统，so库是Linux系统上使用的共享库（类似windows上的dll）。最初，Android 系统只支持 ARMv5 的 CPU 构架，随着 Android 系统的发展，又加入了 ARMv7 (2010), x86 (2011), MIPS (2012), ARMv8, MIPS64 和 x86_64 (2014)。每一种 CPU 构架，都定义了一种 ABI（Application Binary Interface），ABI 决定了二进制文件如何与系统进行交互。

4.2 ABI 是什么

ABI 是 Application Binary Interface （应用二进制界面）的缩写。

不同 Android 手机使用不同的 CPU，因此支持不同的指令集。CPU 与指令集的每种组合都有其自己的应用二进制界面（或 ABI）。 ABI 可以非常精确地定义应用的机器代码在运行时如何与系统交互。必须为应用要使用的每个 CPU 架构指定 ABI。

典型的 ABI 包含以下信息：

机器代码应使用的 CPU 指令集。
运行时内存存储和加载的字节顺序。
可执行二进制文件（例如程序和共享库）的格式，以及它们支持的内容类型。
用于解析内容与系统之间数据的各种约定。这些约定包括对齐限制，以及系统如何使用堆栈和在调用函数时注册。
运行时可用于机器代码的函数符号列表 - 通常来自非常具体的库集。

4.3 为何设置 ndk 的 abiFilters

其实这个可以不设置，这样编译时，就会将项目里所有依赖资源包里的so库都编译到最终的apk里。

但是有些平台，我们是不需要支持的，如果不删除依赖的话，apk 就臃肿了。如果那些so库是我们自己编译出来的，那可以直接在工程中删除对应so文件，但是如果是第三方提供的，就不好删除了，所以就需要使用abiFilters来过滤了。

当前市面绝大多数是arm架构的 CPU，而且都是 V7 或 V8 架构，所以可以保留armeabi或者armeabi-v7a即可。

如果仅保留armeabi-v7a，而有些第三方包未提供v7a的包，则可以将对应armeabi包拷贝到armeabi-v7a。

如果同时保留armeabi和armeabi-v7a，则需要保证两个目录下的so库文件数相同。

4.4 如何配置 gardle

build.gradle配置信息如下所示：

ndk {    //设置支持的SO库架构    abiFilters "armeabi", "armeabi-v7a", "x86_64" //, "arm64-v8a"}

复制代码

4.5 支持建议

由于处理器架构为armeabi-v7a、arm64-v8a占市场的 99%以上的份额，因此我们必须要支持。

Android 处理器架构汇总建议：

mips (已弃用)
mips64 (已弃用)
armeabi (已弃用)
armeabi-v7a (需要支持— 现在最流行的处理器架构)
arm64-v8a (需要支持 — armeabi-v7a 的新版本)
x86 (可选, 设备非常有限，可以用于模拟器 debugging)
x86_64 (可选, 设备非常有限，可以用于模拟器 debugging)

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/6cd4097bf45d9b3ac6f1594f7】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景