Tab 选项卡组件

渲染出一个带过渡动画带选项卡

特殊说明

  • 支持受控/非受控
  • 默认高度44，不支持更改，除非自定义视图

安装

npm install @qnpm/q-tab --save --registry=http://npmrepo.corp.qunar.com

使用说明

显示代码

import Tab from '@qnpm/q-tab';

const renderBaseTab = (props) => {
  const [selected, setSelected] = useState(props.selectedIndex);
  return (
    <View>
      <Tab
        {...props}
        selectedIndex={selected}
        onClickItem={(index, selected) => {
          setSelected(index);
        }}
      />
    </View>
  );
};

    const itemList = [
        {text: '酒店'},
        {text: '机票'},
        {text: '门票'},
        {text: '一日游'}];
    return (
      <View style={[styles.container]}>
          <TextSplit text={"基础"}/>
          {
              renderBaseTab({
                  itemList
              })
          }
          <TextSplit text={"宽度相等"}/>
          {
              renderBaseTab({
                  itemList,
                  equantLayout: 'equalWidth'
              })
          }
          <TextSplit text={"间距相等"}/>
          {
              renderBaseTab({
                  itemList,
                  equantLayout: 'equalSpacing'
              })
          }
          <TextSplit text={"自定义样式"}/>
          {
              renderBaseTab({
                  itemList,
                  customStyle: {
                      wrapperStyle: {
                          backgroundColor: '#eee'
                      },
                      itemStyle: {
                          color: '#000',
                          unselectedColor: '#ccc'
                      }
                  }
              })
          }
      </View>
    )

显示代码

import Tab from '@qnpm/q-tab';

const renderBaseTab = (props) => {
  const [selected, setSelected] = useState(props.selectedIndex);
  return (
    <View>
      <Tab
        {...props}
        selectedIndex={selected}
        onClickItem={(index, selected) => {
          setSelected(index);
        }}
      />
    </View>
  );
};

const lineRender = () => {
  const itemList = [
    {text: '酒店'},
    {text: '机票'},
    {text: '门票'},
    {text: '门票2'},
    {text: '门票3'},
    {text: '门票4'},
    {text: '一日游'}];
  return (
    <View style={styles.container}>
      <TextSplit text={"底线"}/>
      {
        renderBaseTab({
          itemList,
          showBottomLine: true
        })
      }
      <TextSplit text={"无滑块"}/>
      {
        renderBaseTab({
          itemList,
          hideWidget: true
        })
      }
      <TextSplit text={"无遮罩"}/>
      {
        renderBaseTab({
          itemList,
          notShowMask: true
        })
      }
    </View>
  );
};

显示代码

import AnimatedTab from '@qnpm/q-tab';

const diyRender = () => {
  const itemList = [
    {text: '酒店'},
    {text: '机票'},
    {text: '门票'},
    {text: '门票2'},
    {text: '门票3'},
    {text: '门票4'},
    {text: '一日游'}];
  return (
    <View style={styles.container}>
      <Tab
        itemList={itemList}
        selectedIndex={1}
        renderItem={(index, selected, item) => {
          return (
            <View style={{
              height: 60,
              backgroundColor:
                selected
                  ? '#BFEDDD'
                  : '#fff'
            }}>
              <Text style={{
                fontSize: selected ? 16 : 14,
                color: selected
                  ? '#1ba9ba'
                  : '#666666',
              }}>
                {item.text}
              </Text>
            </View>
          )
        }}
      />
    </View>
  );
};

属性说明

属性名 类型 默认值 是否必须 说明
accessibilityPreName string `` false 无障碍标签前缀
animationDisabled boolean false false 是否支持动画
customStyle TabStyle undefined false 部分支持自定义style
equantLayout TabEquantLayoutType undefined false 等分布局类型，默认不等分
hideWidget boolean false false 是否展示滑块，默认展示
itemList TabItem[] - true tab名称列表，必传
needScale boolean false false 是否缩放，默认false
notShowMask boolean `` false 是否需要展示渐变遮罩
onClickItem (index: number, selected: boolean, item: TabItem) => void undefined false 点击item回调，index为点击索引，selected为点击时item是否选中，注意：调用scrollTo方法后也会回调
renderItem (index: number, selected: boolean, item: TabItem) => JSX.Element undefined false 自定义条目视图
selectedIndex number 0 true 受控选中的索引
showBottomLine boolean false false 是否展示底线

tabItem 说明

属性名 类型 默认值 是否必须 说明
showSuffixIcon boolean false false 是否展示tab标题后的小三角图标
text string - true tab标题，必传

customStyle 说明

wrapperStyle仅可以修改以下样式：flex | width | backgroundColor | padding | margin itemStyle

属性名 类型 默认值 是否必须 说明
color string gray1 false 选中情况字色
unselectedColor string gary2 false 未选中情况字色
widgetColors string[] ['#99F8FF', '#00EEFF'] false 滑块渐变色，仅支持两个色值
spacing number undefined false item之间的间距，默认30，等分下无效

equantLayout 说明

'equalWidth' // 宽度相等 
'equalSpacing' // 间距相等
Shadow
Tag