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