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