react-native-scrollable-tab-view组件样式修改

引入

mport ScrollableTabView from 'react-native-scrollable-tab-view';
import ScrollableTabBar from '../../common/components/ScrollableTab/ScrollableTabBar';

最外围：View

• 属性
  • style //最外围样式样式 //tab外围的高度 【修改成自己的高度，此处必须对height重新赋值】
  • backgroundColor //最外围样式样式--修改其背景色
• 使用

  • 此模块的源代码

  • 图片

    圆角

  • 代码

<ScrollableTabView
   renderTabBar={() => <ScrollableTabBar 
   style={{height:34}}    //此行
   tabStyle={{height:34}}
/>}

</ScrollableTabView>

外围ScrollView：View > ScrollView

• 属性

  • scrollViewStyle

• 使用

  • 当tab旁边有其他按钮--图片
  • 代码

Tab容器View：View > ScrollView > View

• 此模块的源代码

• 属性

  • tabsContainerStyle

选中的底部横线：View > ScrollView > View > Animated.View

• 属性
  • underlineStyle //选中状态 下划线样式

Tab：View > ScrollView > View > View

• 属性 //tab的高度 【修改成自己的高度，此处必须对height重新赋值】
  • tabStyle //tab的样式
  • acTivityBg //选中的tab样式
  • inActabBg //未选中的tab样式
  • acFontWeight //选中的字重
  • inAcFontWeight //未选中的字重
  • inAcFontSize //未选中的字体大小
  • acFontSize //选中的字体大小
• 使用

  • tab按钮样式-图片 【Tab：今日、昨日、本月】

    用到的属性：acTivityBg 、inActabBg 、tabStyle 、style 、tabsContainerStyle

    代码：

    <ScrollableTabView
        prerenderingSiblingsNumber={0}
        scrollWithoutAnimation={true}
        page={this.state.currentPage}
        initialPage={this.state.currentPage}
        tabBarBackgroundColor='#F6F6F6'
        tabBarActiveTextColor='#fff'
        tabBarInactiveTextColor='#777'
        tabBarTextStyle={{ fontSize: 12 }}
        tabBarUnderlineStyle={[{ backgroundColor: '#F6F6F6',height:0 }]}
        renderTabBar={() => (<ScrollableTabBar 
            style={{height:40}}
            tabsContainerStyle={{
                paddingLeft:width-(width-156),
                paddingRight: 12,
                alignItems: 'center',
                justifyContent: 'flex-end',
                borderBottomWidth: 0,
            }}
            tabStyle={{
                width: 42,
                height: 20,
                marginLeft: 10,
                marginRight: 0,
                justifyContent: 'center',
                alignItems: 'center',
                paddingLeft: 0,
                paddingRight: 0,
                borderRadius: 2,
            }}
            acTivityBg={{
                borderWidth: 0,
                backgroundColor: '#FDA001'
            }}
            inActabBg={{
                borderWidth: StyleSheet.hairlineWidth,
                borderColor: '#D0D0D0',
                backgroundColor: '#F6F6F6'
            }}
        />)}
    >
    </ScrollableTabView>
    

  • 代码(tabStyle)

    <ScrollableTabView
          renderTabBar={() => <ScrollableTabBar 
          style={{height:34}}    
          tabStyle={{height:34}}   //此行--高度
       />}
     >
     </ScrollableTabView>
    

备注： 可以自行修改 ScrollableTabBar.js ，实现自己需要的需求。ScrollableTabBar.js 可到以下链接去下载

参考的地址： github.com/ptomasroos/…

修改后的地址（本文的属性请参考这个）： gitee.com/echopcn/cod…

备注：由于此截图来自于公司项目，左右有些打了码，请谅解。谢谢