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

国际惯例，先加入引用：

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

官方文档