[!TIP] Github 地址

安装与使用

进入到工程目录并输入以下命令：

npm

npm install @tuya-oh/react-native-sectionlist-contacts

yarn

yarn add @tuya-oh/react-native-sectionlist-contacts

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
} from 'react-native';

import SectionListModule from 'react-native-sectionlist-contacts'

function App(): JSX.Element {

  //name is required and other params such as id is optional
  const nameData=[
    {name:'阿玛尼',id:'amani',params: ''},
    {name:'OK',id:'ok',params: '123'},
    {name:'天津饭'},
    {name:'%……&'},
    {name:'周星驰'},
    {name:'习大表哥'},
    {name:'不要这样'},
    {name:'V字仇杀队'},
    {name:'拼车'},
    {name:'他妈跌'},
    {name:'淫僧'},
    {name:'钱学森'},
    {name:'宁采臣'},
    {name:'史泰龙'},
    {name:'恐龙'},
    {name:'任达华'},
    {name:'妈咪宝贝'},
    {name:'ing'},
    {name:'康麦隆'},
    {name:'刘德华'},
    {name:'精忠报国'},
    {name:'黄药师'},
    {name:'大叔皮'},
    {name:'布达拉宫'},
    {name:'方世玉'},
    {name:'ET外星人'},
    {name:'程咬金'},
    {name:'**&&&&'},
  ]

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        <SectionListModule
            sectionListData={nameData}
            sectionHeight={50}
            sectionHeaderHeight={25}
            initialNumToRender={nameData.length}
            showsVerticalScrollIndicator={false}
            highlightAlphabetColor={'blue'}
            showHighlightAlphabetColor={true}
            SectionListClickCallback={(item,index,section) => {
              console.log('---SectionListClickCallback--:',item,index)
            }}
            otherAlphabet="#"
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

约束与限制

属性

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------ | ------------------------------------------------------------ | ----------------------- | -------- | ----------- | ----------------- | | sectionListData | 要显示的数据 | Array | yes | IOS/Android | yes | | sectionHeight | 截面项的高度（默认值：50） | Integer | no | IOS/Android | yes | | sectionHeaderHeight | 节标题的高度（默认值：25） | Integer | no | IOS/Android | yes | | initialNumToRender | 要渲染的项目的初始数量 | Integer | no | IOS/Android | yes | | showAlphabet | 要渲染的项目的初始数量 | Boolean | no | IOS/Android | yes | | scrollAnimation | 点击右字母是否有滚动动画（默认值：false） | Boolean | no | IOS/Android | yes | | otherAlphabet | 其他字母表 | String | no | IOS/Android | yes | | sectionHeaderTextStyle | 节标题文本的样式 | Text.propTypes.style | no | IOS/Android | yes | | sectionItemViewStyle | 节项盒子的样式 | Text.propTypes.style | no | IOS/Android | yes | | sectionItemTextStyle | 节项文本的样式 | Text.propTypes.style | no | IOS/Android | yes | | letterViewStyle | 右侧字母盒子的样式 | Text.propTypes.style | no | IOS/Android | yes | | letterTextStyle | 右字母文本的样式 | Text.propTypes.style | no | IOS/Android | yes | | renderHeader | 自定义标头组件，接受1个参数props，并应返回一个用作标头的组件。 | Function:ReactComponent | no | IOS/Android | yes | | renderItem | 自定义节项组件，接受2个参数props，并应返回一个组件用作sscion项。 | Function:ReactComponent | no | IOS/Android | yes | | SectionListClickCallback | 按下每个项目时进行回调 | Function(item, index) | no | IOS/Android | yes |

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。