ReactNative的横向滚动列表标签定位功能在美团或者⼤众点评上，我们经常看到那种竖形的滚动列表，左边可以定位右边的内容，右边可以定位左边标签tab。
在RN中，我们也想有这种横向的功能，以下介绍⼀个组件：
可以帮我们很⽅便的实现这个功能。
可⽤属性
data：required，数据源
tabStyle：optional tab的基本样式
selectedTabTextStyle：optional 选中之后⽂本的样式
selectedBarStyle：optional 选中之后移动的条状bar的样式
renderItem： required 渲染Item内容
renderDivider: optional 渲染分界⾯的divider
使⽤⽅法如下：
下载： npm install react-native-horizontal-category-list
引⼊组件： import { HorizontalSectionList } from "react-native-horizontal-category-list";
简单例⼦：
const data = [
{
label: "你好",
items: [
{ key: "name" },
{ key: "测试A1" },
{ key: "测试A2" },
{ key: "测试A3" },
{ key: "测试A4" }
]
},
{
label: "测试",
items: [
{ key: "nameB" },
{ key: "测试B" }
]
},
{
label: "的分",
items: [
{ key: "nameC" },
{ key: "测试C" }
]
},
{
label: "舒服",
items: [
{ key: "nameD" },
{ key: "nameD1" },
{ key: "nameD2" },
{ key: "nameD3" },
{ key: "nameD4" },
{ key: "测试D" }
]
}
];
<HorizontalSectionList
reactnative开发
data={data}
renderItem={(item) => <View key={"item" + item} style={itemStyle}><Text>{item.key}</Text></View>} />
效果图：
定制化样式：
<HorizontalSectionList
data={data}
tabStyle={{ marginLeft: 2, borderWidth: 1, color: "gray", borderBottomWidth: 0, borderColor: "#9c9cA3", borderTopLeftRadius: 4, borderTopRightRadius: 4 }}
selectedTabTextStyle={{ color: "blue" }}
selectedBarStyle={{ width: 10, backgroundColor: "blue" }}
renderItem={(item) => <View key={"item" + item} style={itemStyle}><Text>{item.key}</Text></View>} />
效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。