当前位置： 移动技术网 > IT编程>脚本编程>vue.js > React Native的横向滚动列表，实现标签tab定位功能

React Native的横向滚动列表，实现标签tab定位功能

2020年08月01日  | 移动技术网IT编程  | 我要评论

在美团或者大众点评上，我们经常看到那种竖形的滚动列表，左边可以定位右边的内容，右边可以定位左边标签tab。

在RN中，我们也想有这种横向的功能，以下介绍一个组件：react-native-horizontal-category-list

可以帮我们很方便的实现这个功能。

可用属性 

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

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>} />

效果：


本文地址：https://blog.csdn.net/A_love_B/article/details/107712127

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网