在 React Native Router Flux Tabbar 中以编程方式隐藏和显示各个选项卡 [英] Programatically hiding and showing individual tabs in React Native Router Flux Tabbar
问题描述
我的应用中有一个使用 React Native Router Flux 的标签栏.在一些用例中,基于当前用户隐藏或显示特定选项卡会非常有帮助.我遇到的主要是:
I have a tabbar in my app using React Native Router Flux. There are a couple use cases where hiding or showing specific tabs based on the current user would be very helpful. The main ones I have run into are:
- AB 针对特定用户测试新标签
- 向具有特定权限的特定用户显示特殊的管理标签
就我所见,react-native-router-flux 库不支持任何选项来执行此操作.我怎样才能实现这个功能?
The react-native-router-flux library does not support any options to do this from what I can see. How can I achieve this functionality?
推荐答案
react-native-router-flux 中的默认 tabbar 组件只是来自 react-navigation-tabs
库的组件.你可以将这个组件直接导入到你的代码中,根据需要进行自定义,然后通过 tabBarComponent
属性(此处记录).
The default tabbar component in react-native-router-flux is just the component from the react-navigation-tabs
library. You can import this component directly into your code, customize as needed, and then pass it to react-native-router-flux
through the tabBarComponent
prop (documented here).
我创建了一个新组件,您应该可以直接复制它,只需根据您的状态更改实际隐藏选项卡的逻辑:
I created a new component, which you should be able to copy directly and just change the logic for actually hiding the tabs based on your state:
import React from 'react'
import { BottomTabBar } from 'react-navigation-tabs'
import { View, TouchableWithoutFeedback } from 'react-native'
import { connect } from 'react-redux'
const HiddenView = () => <View style={{ display: 'none' }} />
const TouchableWithoutFeedbackWrapper = ({
onPress,
onLongPress,
testID,
accessibilityLabel,
...props
}) => (
<TouchableWithoutFeedback
onPress={onPress}
onLongPress={onLongPress}
testID={testID}
hitSlop={{
left: 15,
right: 15,
top: 5,
bottom: 5,
}}
accessibilityLabel={accessibilityLabel}
>
<View {...props} />
</TouchableWithoutFeedback>
)
const TabBarComponent = props => (
<BottomTabBar
{...props}
getButtonComponent={({ route }) => {
if (
(route.key === 'newTab' && !props.showNewTab) ||
(route.key === 'oldTab' && props.hideOldTab)
) {
return HiddenView
}
return TouchableWithoutFeedbackWrapper
}}
/>
)
export default connect(
state => ({ /* state that you need */ }),
{},
)(TabBarComponent)
然后简单地将其导入并在我的 Tabs 组件中使用:
And then simply imported and used that in my Tabs component:
<Tabs
key="main"
tabBarComponent={TabBarComponent} // the component defined above
...
详细查看这些东西被传递到哪里
看着 the linereact-native-router-flux 的源,它使用 react-navigation
库中的 createBottomTabNavigator
,如果不通过自定义 tabBarComponent.react-navigation
中的 createBottomTabNavigator
方法来自 来自库的这一行,实际上是在 react-navigation-tabs
中定义的.现在,我们可以这里 在 react-navigation-tabs
中看到,如果没有传递 tabBarComponent,它只会使用BottomTabBar,也在 react-navigation-tabs
中定义.这个BottomTabBar
,反过来,通过 props 获取自定义标签按钮渲染器,称为 getButtonComponent
.
Looking at the line of the source of react-native-router-flux, it is using createBottomTabNavigator
from the react-navigation
library, and passing no component if you do not pass a custom tabBarComponent. The createBottomTabNavigator
method in react-navigation
comes from this line of the library, and is actually defined in react-navigation-tabs
. Now, we can here see in react-navigation-tabs
that if no tabBarComponent has been passed, it simply uses BottomTabBar, also defined in react-navigation-tabs
. This BottomTabBar
, in turn, takes a custom tab button renderer through props, called getButtonComponent
.
这篇关于在 React Native Router Flux Tabbar 中以编程方式隐藏和显示各个选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!