以编程方式隐藏和显示 React Native Router Flux Tabbar 中的各个选项卡答案

【问题标题】：Programatically hiding and showing individual tabs in React Native Router Flux Tabbar以编程方式隐藏和显示 React Native Router Flux Tabbar 中的各个选项卡
【发布时间】：2019-02-25 18:01:25
【问题描述】：

我的应用中有一个使用 React Native Router Flux 的标签栏。在一些用例中，根据当前用户隐藏或显示特定选项卡会非常有用。我遇到的主要是：

AB 测试特定用户的新标签
向具有特定权限的某些用户显示一个特殊的管理选项卡

从我所见，react-native-router-flux 库不支持执行此操作的任何选项。我怎样才能实现这个功能？

【问题讨论】：

标签： react-native react-native-navigation react-native-router-flux

【解决方案1】：

react-native-router-flux 中的默认标签栏组件只是来自react-navigation-tabs 库的组件。您可以将此组件直接导入到您的代码中，根据需要进行自定义，然后通过tabBarComponent 属性（documented here）将其传递给react-native-router-flux。

我创建了一个新组件，您应该可以直接复制它并根据您的状态更改实际隐藏选项卡的逻辑：

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 组件中简单地导入并使用它：

<Tabs
  key="main"
  tabBarComponent={TabBarComponent} // the component defined above
  ...

详细了解这些东西被传递到哪里

查看 react-native-router-flux 的 the line of the source，它使用来自 react-navigation 库的 createBottomTabNavigator，如果您不传递自定义 tabBarComponent，则不传递任何组件。 react-navigation 中的createBottomTabNavigator 方法来自from this line of the library，实际上是在react-navigation-tabs 中定义的。现在，我们可以here 在react-navigation-tabs 中看到，如果没有传递任何tabBarComponent，它只是使用BottomTabBar，也在react-navigation-tabs 中定义。这个BottomTabBar，反过来，takes a custom tab button renderer through props，叫getButtonComponent。

【讨论】：

其实return TouchableWithoutFeedbackWrapper;和return null;效果一样，可以去掉TouchableWithoutFeedbackWrapper重新定义。