博客> RN_scrollable_tabview Tab
RN_scrollable_tabview Tab
2017-11-24 15:40 评论:0 阅读:387 Slience520
RN

RN_scrollable_tabview Tab通用控制器

添加react-native-scrollable-tab-view

 npm install react-native-scrollable-tab-view --save

Props

1.renderTabBar

renderTabBar(Function:ReactComponent) TabBar的样式,DefaultTabBar和ScrollableTabBar,也可以自定义一个 每个被包含的子视图需要使用tabLabel属性,表示对应Tab显示的文字

render() { return ( 
   <ScrollableTabView renderTabBar={()> 
    <DefaultTabBar>}> 
    <Text tabLabel='Tab1'> 
    <Text tabLabel='Tab2'> 
    <Text tabLabel='Tab3'> 
    <Text tabLabel='Tab4'> 
    <Text tabLabel='Tab5'> 
    <Text tabLabel='Tab6'> 
   </ScrollableTabView> ); }

1.1 DefaultTabBar

Tab会平分在水平方向的空间

1.2 ScrollableTabBar

Tab可以超过屏幕范围,滚动可以显示

2. tabBarPosition

tabBarPosition(String,默认值'top')

render() {
  return (
    <ScrollableTabView tabBarPosition='top' renderTabBar={()> <DefaultTabBar>}>
      ...
    </ScrollableTabView>
  );
}

2.1 top

位于屏幕顶部

2.2 bottom

位于屏幕底部

2.3overlayTop

位于屏幕顶部,悬浮在内容视图之上(看颜色区分:视图有颜色,Tab栏没有颜色)

2.4 overlayBottom

位于屏幕底部,悬浮在内容视图之上(看颜色区分:视图有颜色,Tab栏没有颜色)

3. onChangeTab(Function)

Tab切换之后会触发此方法,包含一个参数(Object类型),这个对象有两个参数: i:被选中的Tab的下标(从0开始) ref:被选中的Tab对象(基本用不到)

render() { 
    return ( 
    <ScrollableTabView renderTabBar={()> <DefaultTabBar>} 
      onChangeTab={(obj) => {
          console.log('index:' + obj.i); } }
    > ...
    </ScrollableTabView> ); }

4.onScroll

onScroll(Function) 视图正在滑动的时候触发此方法,包含一个Float类型的数字,范围是[0, tab数量-1]

render() { 
    return (
     <ScrollableTabView renderTabBar={()> <DefaultTabBar>}  
         onScroll={(postion) => { 
         // float类型 [0, tab数量-1] 
         console.log('scroll position:' + postion); } } 
    > 
         ...
     </ScrollableTabView> ); }

5.locked

locked(Bool,默认为false) 表示手指是否能拖动视图,默认为false(表示可以拖动) 设为true的话,我们只能“点击”Tab来切换视图

render() {
  return (
    <ScrollableTabView locked={false} renderTabBar={()> <DefaultTabBar>}>
      ...
    </ScrollableTabView>
  );
}

6.initialPage

initialPage(Integer) 初始化时被选中的Tab下标,默认是0(即第一页)

render() {
  return (
    <ScrollableTabView initialPage={1} renderTabBar={()> <DefaultTabBar>}>
      ...
    </ScrollableTabView>
  );
}

7.children

children(ReactComponents) 表示所有子视图的数组 比如下面的代码,children则是一个长度为6的数组,元素类型为Text

render() { 
     return ( 
         <ScrollableTabView renderTabBar={()> <DefaultTabBar>}
         > 
            <Text tabLabel='Tab1'> 
            <Text tabLabel='Tab2'>
            <Text tabLabel='Tab3'> 
            <Text tabLabel='Tab4'> 
            <Text tabLabel='Tab5'> 
            <Text tabLabel='Tab6'>
         </ScrollableTabView> ); }

8.tabBarUnderlineStyle

tabBarUnderlineStyle(style) 设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色

9. tabBarBackgroundColor

tabBarBackgroundColor(String) 设置整个Tab这一栏的背景颜色

10.tabBarActiveTextColor

tabBarActiveTextColor(String) 设置选中Tab的文字颜色

11.tabBarInactiveTextColor

tabBarInactiveTextColor(String) 设置未选中Tab的文字颜色

12.tabBarTextStyle

tabBarTextStyle(Object) 设置Tab文字的样式,比如字号、字体等

render() { 
    return (
      <ScrollableTabView renderTabBar={()> <DefaultTabBar>}   
         tabBarUnderlineColor='#FF0000' 
         tabBarBackgroundColor='#FFFFFF' 
         tabBarActiveTextColor='#9B30FF' 
         tabBarInactiveTextColor='#7A67EE' 
         tabBarTextStyle={{fontSize: 18}}
       > 
       ... 
      </ScrollableTabView> ); 
  }

13.style

style(View.propTypes.style) 系统View都拥有的属性,基本不会涉及到

14.contentProps(Object)

contentProps(Object)

15.scrollWithoutAnimation

scrollWithoutAnimation(Bool,默认为false) 设置“点击”Tab时,视图切换是否有动画,默认为false(即:有动画效果) 这个属性的设置对滑动视图切换的动画效果没有影响,仅仅对“点击”Tab效果有作用

render() {
  return (
    <ScrollableTabView scrollWithoutAnimation={true} renderTabBar={()> <DefaultTabBar>}>
      ...
    </ScrollableTabView>
  );
}

收藏
0
sina weixin mail 回到顶部