Question

我使用React Native Router Flux在应用程序中有一个选项卡。在几个用例中，根据当前用户隐藏或显示特定选项卡将非常有帮助。我遇到的主要问题是：

AB针对特定用户测试新标签页
向具有某些特权的某些用户显示特殊的管理标签

从我所看到的，react-native-router-flux库不支持执行此操作的任何选项。如何实现此功能？

Answer 1

react-native-router-flux中的默认选项卡组件只是react-navigation-tabs库中的组件。您可以将该组件直接导入代码中，根据需要进行自定义，然后通过react-native-router-flux道具（documented here）将其传递给tabBarComponent。

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

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
  ...

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

看the line of the source的react-native-router-flux，它使用的是createBottomTabNavigator库中的react-navigation，如果不传递自定义的tabBarComponent，则不传递任何组件。 createBottomTabNavigator中的react-navigation方法来自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。

以编程方式隐藏和显示React Native Router Flux标签栏中的各个标签

1 个答案: