TYFlatList

TYFlatList 列表组件

概述

1.0 开始加入

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

在需要列表的情况下只需要传递data即可定制对应列表项,其中的data中的所有值将会被作为props传递给TYFlatList.Item组件。

如果列表项需要定制,给TYFlatList覆盖renderItem即可,如果列表项中有单独几个项需要定制,那么您甚至可以在data字段里面传入renderItem定制该列表项组件;

何时使用

一般用于dp点设置页面或一些列表项数据展示页面。

代码演示

基础列表

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

const TYNative = TYSdk.native;

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

export default class TYFlatListBasicScene extends Component {
get data() {
const imgStyle = { width: 24, height: 24 };
return new Array(15).fill(0).map((_, idx) => ({
key: idx,
styles: idx === 2 && {
container: styles.listItem,
title: styles.title,
subTitle: styles.subTitle,
},
title: `title_${idx}`,
subTitle: `subTitle_${idx}`,
arrow: true,
Icon: <Image style={imgStyle} source={Res.hue} />,
onPress: this._handleItemPress(idx),
renderItem: idx === 1 && this.renderCustomItem,
}));
}

_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 (
<TYFlatList
style={{ alignSelf: 'stretch' }}
contentContainerStyle={{ paddingTop: 16 }}
data={this.data}
/>
);
}
}

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 { TYFlatList } from 'tuya-panel-kit';

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

get data() {
return [{
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 (
<TYFlatList
style={{ alignSelf: 'stretch' }}
contentContainStyle={{ paddingTop: 16 }}
data={this.data}
/>
);
}
}

基础列表项

import React, { Component } from 'react';
import { View, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { TYSdk, TYFlatList } 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 TYFlatListItemScene 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 (
<TYFlatList.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(TYFlatList)

FlatListprops继承自FlatListFlatList文档

data

与FlatList的一致,如果renderItem不复写的话,data会被当做props传递给TYFlatList.Item

类型(Type) 必传(Required)
array

separatorStyle

分隔栏的样式

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

API(TYFlatList.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