React-Native-Scrollable-Tab-View使用

React Native中有许多第三方用于封装tabBar的库，当然也有官方提供的。React-native-scrollable-tab-view是一款非常实用的第三方库。放于界面之上可以实现一个界面中子界面的切换效果，置于界面之下可实现功能模块间的切换，通常用于封装自定义的tabBar。

安装

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

属性

renderTabBar:用于渲染TabBar。添加该属性，需要在引入组件之时加上它的子组件。系统提供两种方式，DefaultTabBar和ScrollableTabBar。DefaultTabBar表示Tab.item会平分水平方向上的空间，而ScrollableTabBar表示所有的tabBar.item的长度将会超过屏幕宽度，但是当滚动屏幕之时可以显示出来。当然我们也可以自定义它的模式。

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

//在render函数中
 render() {
        return (
            <ScrollableTabView
               //渲染成ScrollableTabBar模式 
               // renderTabBar={() => <ScrollableTabBar/>}

               //渲染成自定义的模式
               renderTabBar={() => <MyTabBar tabNames={tabNames} tabIconNames={tabIconNames}/>}
     >
<ScrollableTabView/>
)}

<ScrollableTabView
                    renderTabBar={() => <DefaultTabBar />}
                tabBarUnderlineStyle={{
                  backgroundColor: '#000',
                  height: 2
                }}
                tabBarBackgroundColor='#FFFFFF'
                tabBarActiveTextColor='#000'
                tabBarInactiveTextColor='#959595'
                tabBarTextStyle={{ fontSize: 14 }}
                locked={false}
              >