ReactNative组件-react-native-scrollable-tab-view

最新推荐文章于 2024-05-16 01:26:01 发布

呵Sever

最新推荐文章于 2024-05-16 01:26:01 发布

阅读量840

点赞数 1

分类专栏： RN js android ios 文章标签： ReactNativ ios android 安卓 javascript

本文链接：https://blog.csdn.net/sinat_14917301/article/details/53739995

版权

RN 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

android

1 篇文章 0 订阅

订阅专栏

国际惯例，先加入引用：

import ScrollableTabView, {DefaultTabBar,ScrollableTabBar} from 'react-native-scrollable-tab-view';

DefaultTabBar样式为：蓝色下横杠，蓝色选中文字，黑色默认文字，白色背景，平铺整个宽度：

DefaultTabBar样式

ScrollableTabBar样式为，蓝色下横杠，蓝色选中文字，黑色默认文字，白色背景，可水平滚动：

ScrollableTabBar样式

demo：

var App = React.createClass({
  render() {
    return (
      <ScrollableTabView renderTabBar={(props) => <DefaultTabBar/>}>
        <Text tabLabel='Page0'/>
        <Text tabLabel='Page1'/>
        <Text tabLabel='Page2'/>
        <Text tabLabel='Page3'/>
        <Text tabLabel='Page4'/>
      </ScrollableTabView>
    );
  }
});

常用参数说明：

renderTabBar (Function:ReactComponent) - 渲染标签栏，可以用默认的DefaultTabBar或ScrollableTabBar，或者用唯一的参数props进行自定义
- props.goToPage ( Function(Integer) ) - 跳转至某页
- props.tabs (Array) - 标签数组
- props.activeTab (Integer)- 当前激活标签
tabBarPosition (String) - 标签栏位置，默认的为’top’，可以设置成’bottom’
onChangeTab (Function(Integer)) - 更改标签触发
onScroll (Function) - 滚动触发
locked (Bool) - 是否锁定水平滚动，默认值为false
initialPage (Integer) - 默认选择的标签，但居然不加载页面，默认值为0 有什么卵用？
page (Integer) - 非默认时设置并加载指定标签
children (ReactComponents) - 子标签
tabBarUnderlineStyle (View.propTypes.style) - 默认标签的下划线样式
tabBarBackgroundColor (String) - 默认标签的背景颜色
tabBarActiveTextColor (String) - 默认标签的激活文字颜色
tabBarInactiveTextColor (String) - 默认标签的默认文字颜色
tabBarTextStyle (Object) - 默认标签的文字样式
style (View.propTypes.style) - 整体的View样式
contentProps (Object) - 在Android底层是ViewPagerAndroid，iOS是ScrollView，提供自定义底层实现
scrollWithoutAnimation (Bool) - 是否在选择标签时取消动画，默认值为false
prerenderingSiblingsNumber (Integer) - 预渲染邻近页，默认渲染所有，0则渲染当前页