4

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

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

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

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

4

2 回答 2

2

这个例子正在使用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>;
  }
}
于 2019-07-12T16:38:44.460 回答
0

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

  1. 为您的项目创建一个商店并将它们设置为 @observable 并随时更改它们

  2. 将您的项目声明为父组件的状态并将它们传递给您的反应导航

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

于 2018-12-04T07:28:12.660 回答