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}
              >

猜你喜欢

转载自blog.csdn.net/qq_28683541/article/details/86509788

相关文章