Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
react-native-head-tab-view
Advanced tools
带有头部组件,可以整体上下滑动的标签页组件
点击跳转博客文章
最新版本v2.0如果不稳定,可以退回上一个版本v1.1.6
cd Example
yarn or npm install
//运行 Android
react-native run-android
//运行 iOS
cd ios
pod install
cd ../
react-native run-ios
yarn add react-native-head-tab-view react-native-gesture-handler @react-native-community/viewpager
or
npm install react-native-head-tab-view react-native-gesture-handler @react-native-community/viewpager --save
https://github.com/react-native-community/react-native-viewpager#Linking
以下为@react-native-community/viewpager的版本,请自行选择
1.x | 2.x | 3.x |
---|---|---|
iOS support | iOS support | |
Android support | Android support | AndroidX support |
import { HPageViewHoc, TabView } from 'react-native-head-tab-view'
_renderScene = (sceneProps: { item: string, index: number }) => {
const { item } = sceneProps;
if (item == 'ScrollView') {
return <Page1 {...sceneProps} />
} else if (item == 'FlatList') {
return <Page2 {...sceneProps} />
} else if (item == 'SectionList') {
return <Page3 {...sceneProps} />
}
return null;
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#FFF' }}>
<StatusBar
barStyle={'dark-content'}
translucent={true}
/>
{this._renderNavBar()}
<TabView
tabs={this.state.tabs}
renderScene={this._renderScene}
makeHeaderHeight={() => { return 180 }}
renderScrollHeader={()=><View style={{height:180,backgroundColor:'red'}}/>}
onChangeTab={this.onChangeTab}
/>
</View>
)
}
更加完善的例子请点击Example
tabs
(required
) (tabs :string[])此组件的数据源,为各个标签页的名字组成的数组
可配合tabNameConvert
使用
Example:
<TabView
tabs={['tab1','tab2','tab3']}
/>
<Tabbar
tabs={['tab1','tab2','tab3']}
/>
averageTab
(boolean)Tabbar组件内元素是否平分
true
: 以Tabbar宽度平分所有元素
false
: 根据Tabbar元素的长度自动伸展,可左右滑动
Example:
<TabView
tabs={['tab1','tab2','tab3']}
averageTab={true|false}
/>
可以再tabs中设置["a","b","c"],然后通过此方法转换成想要显示在tabbar上的文字
tabbar容器的样式
tabbar item选中的样式
tabbar item未选中的样式
isRefreshing
(boolean)标签页是否处于下拉刷新状态
onStartRefresh
(() => void)开始下拉刷新 回调方法
renderRefreshControl
(() => React.ReactElement)自定义下拉刷新 组件
refreshHeight
(number)下拉刷新的高度 (默认100)
overflowPull
(number)下拉的距离超过 下拉刷新组件的高度 (默认50)
renderScene
(required
) (renderScene :(info: TabViewItemInfo) => React.ReactElement | null | undefined)渲染各个标签子页面的方法,传入参数遵从TabViewItemInfo协议包含以下参数
tabs
数组的其中一个元素)Example:
<TabView
renderScene={(sceneProps)=>{
const {item} = sceneProps
if (item == 'ScrollView') {
return <Page1 {...sceneProps} />
} else if (item == 'FlatList') {
return <Page2 {...sceneProps} />
} else if (item == 'SectionList') {
return <Page3 {...sceneProps} />
}
return null;
}}
/>
renderScrollHeader
(React.ComponentType | React.ReactElement | null)渲染标签页组件共有的头部,可整体滑动
<TabView
makeHeaderHeight={() => { return 180 }}
/>
frozeTop
(number)滑动头部冻结高度,可以让tabbar和子页面滚动到距离顶部frozeTop距离
<TabView
frozeTop={50}
/>
headerRespond
(boolean)头部是否能响应事件 。默认值 false (如果设置为true,头部会相应滑动事件,Android在debug模式下可能会有卡顿的感觉)
<TabView
headerRespond={true}
/>
makeHeaderHeight
(如果有renderScrollHeader时,必须实现此方法
)返回renderScrollHeader组件的高度
renderScrollHeader={()=><View style={{height:180,backgroundColor:'red'}}/>}
renderHeader
(React.ComponentType | React.ReactElement | null)渲染头部组件(在Tabbar的下方)
renderFooter
(React.ComponentType | React.ReactElement | null)渲染底部组件
initialPage
(number)初始显示的标签页序号 (默认是0)
preInitSceneNum
(number)预加载的屏幕数量 (默认是0)
renderTabBar
(React.ComponentType | React.ReactElement | null)自定义Tabbar的渲染方法
onChangeTab
((value: ChangeTabProperties): void)<TabView
onChangeTab={({from,curIndex}) => { console.log('from:'+from+'-to:'+curIndex) }}
/>
onScroll
((value: number): void)当前标签页左右滑动的进度回调,value:当前滚动的距离/总共可滚动距离
locked
(boolean)是否允许水平滑动
tabbarStyle
(StyleProp)tabbar的样式
extraData
(any)用于重新渲染组件
tabbar样式
是否隐藏下划线
下划线容器样式
下划线样式
tabItem样式
渲染tabItem的按钮
渲染tabbarItem方法
当前滚动的距离/总共可滚动距离(水平方向)
渲染Tabbar左边组件
渲染Tabbar右边组件
FAQs
Tab view component for React Native
The npm package react-native-head-tab-view receives a total of 1,319 weekly downloads. As such, react-native-head-tab-view popularity was classified as popular.
We found that react-native-head-tab-view demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.