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
一个带有头部组件,可以整体上下滑动的标签页组件
iOS效果图
Android效果图:
yarn add react-native-head-tab-view
or
npm install react-native-head-tab-view --save
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>
)
}
更加完善的demo请点击demo
tabs
(required
) (tabs :string[])此组件的数据源,为各个标签页的名字组成的数组
可配合tabNameConvert
使用
Example:
<TabView
tabs={['tab1','tab2','tab3']}
/>
averageTab
(boolean)Tabbar组件内元素是否平分
true
: 以Tabbar宽度平分所有元素
false
: 根据Tabbar元素的长度自动伸展,可左右滑动
Example:
<TabView
tabs={['tab1','tab2','tab3']}
/>
renderScene
(required
) (renderScene :(info: TabViewItemInfo) => React.ReactElement | null | undefined)渲染各个标签子页面的方法,传入参数遵从TabViewItemInfo协议包含以下参数
tabs
数组的其中一个元素)下面的参数是使用了renderScrollHeader
才有(这些参数一般都用不上,只需要全部传递给HPageViewHoc)
HPageViewHoc
中计算补位视图高度)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 }}
/>
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)用于重新渲染组件
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.