TYSectionList

TYSectionList 分组列表组件

简介

1.0 开始加入

TYSectionList是基于RN自带的SectionList组件做了一层简单的封装,因此该组件可以复用所有SectionList的属性

在需要列表的情况下只需要传递sections即可定制对应列表项,其中如果有title字段则会有默认的SectionHeader,另外其中的data中的所有值将会被作为props传递给TYSectionList.Item组件。

如果需要定制列表项,给TYSectionList覆盖renderItem即可,如果某一区块的列表项需要定制则可以给sections中添加renderItem给该区块定制列表项,如果列表项中只有单独几个项需要定制,那么您甚至可以在data字段里面传入renderItem定制该列表项组件;

何时使用

一般用于需要进行区块分组的dp点设置页面或一些列表项数据展示页面。

代码演示

基础分组列表

import React, { Component } from 'react';
import {
View,
Text,
Image,
StyleSheet,
} from 'react-native';
import {
TYSdk,
TYSectionList,
} from 'tuya-panel-kit';

const TYNative = TYSdk.native;

const Res = {
hue: require('../../res/hue.png'),
};

export default class TYSectionListBasicScene extends Component {
get sections() {
const imgStyle = { width: 24, height: 24 };
return [{
title: null,
data: new Array(3).fill(0).map((_, idx) => ({
key: idx,
title: `S1: title_${idx}`,
onPress: this._handleItemPress(idx),
})),
}, {
title: 'With Section Header',
data: new Array(10).fill(0).map((_, idx) => ({
key: idx,
styles: idx === 2 && {
container: styles.listItem,
title: styles.title,
subTitle: styles.subTitle,
},
title: `S2: title_${idx}`,
subTitle: `S2: subTitle_${idx}`,
arrow: true,
Icon: <Image style={imgStyle} source={Res.hue} />,
onPress: this._handleItemPress(idx),
renderItem: idx === 1 ? this.renderCustomItem : null,
})),
}];
}

_handleItemPress = value => () => {
TYNative.simpleTipDialog(`Click Item ${value}`, () => {});
}

renderCustomItem = ({ item }) => {
return (
<View style={{ backgroundColor: 'red', height: 100 }}>
<Text style={styles.title}>
{`我是定制的列表项${item.title},我下面那个是更改了样式的列表项`}
</Text>
</View>
);
}

render() {
return (
<TYSectionList
style={{ alignSelf: 'stretch' }}
contentContainerStyle={{ paddingTop: 16 }}
sections={this.sections}
/>
);
}
}

const styles = StyleSheet.create({
listItem: {
height: 72,
marginBottom: 8,
backgroundColor: '#242831',
},

title: {
color: 'rgba(255, 255, 255, 0.9)',
},

subTitle: {
color: 'rgba(255, 255, 255, 0.4)',
marginTop: 4,
},
});

带值的列表项

import React, { Component } from 'react';
import { TYSectionList } from 'tuya-panel-kit';

export default class TYSectionListWithValueScene extends Component {
state = {
boolValue: true,
strValue: '随机数字',
}

get sections() {
return [{
title: null,
data: [{
key: 1,
title: '布尔型value',
value: this.state.boolValue,
onValueChange: boolValue => this.setState({ boolValue }),
}, {
key: 2,
title: '字符型value',
value: this.state.strValue,
onPress: () => this.setState({
strValue: `随机数字: ${Math.random().toFixed(2) * 100}`,
}),
}, {
key: 3,
title: '定制SwitchButton',
value: this.state.boolValue,
onValueChange: boolValue => this.setState({ boolValue }),
SwitchButtonProps: {
onTintColor: '#007AFF',
},
}, {
key: 4,
title: '我不需要重新渲染也不可点击',
disabled: true,
value: this.state.strValue,
onPress: () => this.setState({
strValue: `随机数字: ${Math.random().toFixed(2) * 100}`,
}),
needUpdate: false,
}],
}];
}

render() {
return (
<TYSectionList
style={{ alignSelf: 'stretch' }}
contentContainStyle={{ paddingTop: 16 }}
sections={this.sections}
/>
);
}
}

基础列表项

import React, { Component } from 'react';
import { View, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { TYSdk, TYSectionList } from 'tuya-panel-kit';

const Res = {
edit: require('./res/edit.png'),
delete: require('./res/delete.png'),
more: require('./res/more.png'),
cover: require('./res/cover.png'),
};

const TYNative = TYSdk.native;

export default class TYSectionListItemScene extends Component {
state = {
showActions: false,
}

_handleEdit = () => {
TYNative.simpleTipDialog('edit', () => {});
}

_handleDelete = () => {
TYNative.simpleTipDialog('delete', () => {});
}

renderActions = () => (this.state.showActions ? (
<View style={styles.row}>
<TouchableOpacity
activeOpacity={0.8}
onPress={this._handleEdit}
><Image style={{ marginRight: 6 }} source={Res.edit} />
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.8}
onPress={this._handleDelete}
><Image source={Res.delete} />
</TouchableOpacity>
</View>
) : (
<TouchableOpacity
style={[styles.center, { width: 48, height: 48 }]}
activeOpacity={0.8}
onPress={() => this.setState({ showActions: true })}
><Image source={Res.more} />
</TouchableOpacity>
))

render() {
return (
<TYSectionList.Item
styles={{
container: styles.listItem,
subTitle: styles.textSubtitle,
}}
title="宝宝最爱"
subTitle="数量: 13首"
Icon={() => <Image style={styles.coverImg} source={Res.cover} />}
Action={this.renderActions()}
onPress={() => this.setState({ showActions: false })}
/>
);
}
}

const styles = StyleSheet.create({
listItem: {
height: 76,
},

textSubtitle: {
marginTop: 4,
},

row: {
flexDirection: 'row',
},

center: {
alignItems: 'center',
justifyContent: 'center',
},

coverImg: {
width: 60,
height: 60,
},
});

API(TYSectionList)

SectionListprops继承自SectionListSectionList文档

sections

与SectionList的一致,其中title字段是否存在控制SectionHeader是否存在,data会被当做props传递给TYSectionList.Item

类型(Type) 必传(Required)
array

headerStyle

SectionHeader的样式,当您传递了title时可能会用到

类型(Type) 必传(Required)
ViewProptypes.style

separatorStyle

分隔栏的样式

类型(Type) 必传(Required)
ViewProptypes.style

API(TYSectionList.Item)

styles

您可以通过该props定义Item的所有样式

类型(Type) 必传(Required)
object

styles具体为如下对象

PropTypes.shape({
container: ViewPropTypes.style,
content: ViewPropTypes.style,
contentLeft: ViewPropTypes.style,
contentCenter: ViewPropTypes.style,
contentRight: ViewPropTypes.style,
title: Text.propTypes.style,
subTitle: Text.propTypes.style,
valueText: Text.propTypes.style,
}),

arrow

是否在列表项右边栏显示箭头图标

类型(Type) 必传(Required) 默认值
boolean false

disabled

是否禁用列表点击事件(注Action的点击事件不会被该属性所影响)

类型(Type) 必传(Required) 默认值
boolean false

title

列表项的标题

类型(Type) 必传(Required) 默认值
string null

subTitle

列表项的副标题

类型(Type) 必传(Required) 默认值
string null

Icon

列表项的左边图标栏

类型(Type) 必传(Required) 默认值
element or () => void null

Action

列表项的右边动作栏

类型(Type) 必传(Required) 默认值
element or () => void null

onActionPress

列表项的右边动作栏的点击事件

类型(Type) 必传(Required) 默认值
() => void null

onPress

列表项的点击事件

类型(Type) 必传(Required) 默认值
() => void null

needUpdate

是否需要重新渲染,用于某些性能要求较强的场合

类型(Type) 必传(Required) 默认值
needUpdate true
400-881-8611