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

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

国际惯例，先引用：

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

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

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则渲染当前页

官方文档：https://github.com/skv-headless/react-native-scrollable-tab-view

来源：oschina

链接：https://my.oschina.net/u/1383628/blog/808348

标签

React Native

ios

android

javescript