在反应导航bottomTabBarNavigation上隐藏特定选项卡答案

【问题标题】：Hiding specific tabs on react navigation bottomTabBarNavigation在反应导航bottomTabBarNavigation上隐藏特定选项卡
【发布时间】：2019-05-05 13:15:58
【问题描述】：

想象一下我的标签栏有这样的结构：

const TabBarRoute = {
    Home: HomeStack,
    Orders: OrdersStack,
    Trending: TrendingStack,
    TopSelling: TopSellingStack
}

我只想在底部标签导航器中显示三个标签（订单、趋势、畅销），我如何通过react-navigation 3.x 版实现它？

我想到的一个想法是，我创建一个顶部 stackNavigator 并将 HomeStack 与我的 bottomTabNavigator 一起嵌套在其中，并将顶部 stackNavigator 的初始路由设置为 Home 但是这种方法的问题是它不显示标签栏。

【问题讨论】：

标签： reactjs react-native react-navigation react-android react-navigation-stack

【解决方案1】：

这个例子使用createBottomTabNavigator，但我想同样的规则也适用。它需要使用自定义组件覆盖tabBarButtonComponent，当用户无权访问给定选项卡时，该组件返回 null。

const Config = {
    allow_locations: true,
    allow_stations: true
}

LocationsStackNavigator.navigationOptions = ({navigation}) => {
  return {
    tabBarLabel: 'Locations',
    tabBarTestID: 'locations',
    tabBarIcon: ({focused}) => (
      <TabBarIcon
        focused={focused}
        name={'md-settings'}/>
    )
  }
};

const MyTabNav = createBottomTabNavigator(
  {
    LocationStackNavigator,
    StationsStackNavigator,
    OrdersStackNavigator,
    SettingsStackNavigator
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarButtonComponent: CustomTabButton
    })
  }
);


class CustomTabButton extends React.Component {
  render() {    
    const {
      onPress,
      onLongPress,
      testID,
      accessibilityLabel,
      ...props
    } = this.props;

    if(testID === 'locations' && !Config.allow_locations) return null;
    if(testID === 'stations' && !Config.allow_stations) return null;

    return <TouchableWithoutFeedback onPress={onPress} onLongPress={onLongPress} testID={testID} hitSlop={{ left: 15, right: 15, top: 5, bottom: 5 }} accessibilityLabel={accessibilityLabel}>
        <View {...props} />
      </TouchableWithoutFeedback>;
  }
}

【讨论】：

【解决方案2】：

如果您想拥有可以根据您的情况更改的动态项目，您可以通过 2 种方式进行：首先，您可以将一个组件声明为 react-navigation 组件的父组件，然后

为您的项目创建一个商店并将它们设置为 @observable 并随时更改它们
将您的项目声明为父组件的状态并将它们传递给您的反应导航

在这两种解决方案中，每次您的项目更改都会导致您的组件使用新值重新渲染

【讨论】：

那么如何在react-navigation 的上下文中应用它？
你可以这样做。类 HomeScreen 扩展 React.Component { render() { return ( Home Screen ); } } const RootStack = createStackNavigator( { Home:this.state.homeVisible ? HomeScreen :
, Details: DetailsScreen, }, { initialRouteName: 'Home', } );