react-native的分栏导航实现

1.安装下载：

npm install react-native-scrollable-tab-view --save 2. 导入安装的组件：

import ScrollableTabView, {DefaultTabBar } from 'react-native-scrollable-tab-view'

3. 导入每个分栏对应的页面，这里需要你自己定义这几个页面，每个栏的页面都是独立分开的

import TakeOut from './TakeOut' import Breakfast from './Breakfast'

4. 就像这样把每个页面看成一个组件调用他们就行了。但是要包在ScrollableTabView里面，

其中DefaultTabBar：Tab会平分在水平方向的空间

还可以有其他选项比如：

ScrollableTabBar：Tab可以超过屏幕范围，滚动可以显示

top：位于屏幕顶部

bottom：位于屏幕底部

overlayTop：位于屏幕顶部，悬浮在内容视图之上

 

<View style={styles.tab}> <ScrollableTabView renderTabBar={() => <DefaultTabBar />} tabBarUnderlineColor='#FF0000' tabBarBackgroundColor='#FFFFFF' tabBarActiveTextColor='#9B30FF' tabBarInactiveTextColor='#7A67EE' tabBarTextStyle={{fontSize: 18}} > <TakeOut tabLabel="外卖"/> <Breakfast tabLabel="早餐"/> </ScrollableTabView> </View> look：帅不帅？