Question

想象一下我的标签栏具有以下结构：

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

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

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

Answer 1

此示例使用的是createBottomTabNavigator，但我想同样的规则也适用。它要求使用自定义组件覆盖tabBarButtonComponent，当用户无权访问给定的Tab时，该组件将返回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>;
  }
}

Answer 2

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

为商品创建商店并将其设置为@observable并随时更改
将您的商品声明为父组件的状态，并将其传递给您的反应导航

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

Answer 3

每个选项卡都有tabBarVisible属性，该属性接收布尔值，我认为这正是您所需要的：

const TabBarRoute = {
    Home: {
        screen: HomeStack,
        navigationOptions: {
            tabBarVisible: false,
        },
    },
    Orders: {
        screen: OrdersStack,
        navigationOptions: {
            tabBarVisible: true,
        },
    },
    Trending: {
        screen: OrdersStack,
        navigationOptions: {
            tabBarVisible: true,
        },
    },
    TopSelling: {
        screen: TopSellingStack,
        navigationOptions: {
            tabBarVisible: true,
        },
    },
}

navigationOptions可以是一个为您提供navigation对象的函数，您可以将其用于自定义逻辑。例如：

Home: {
    screen: HomeStack,
    navigationOptions: ({ navigation }) => ({
        tabBarVisible: navigation.state.index !== 0,
    }),
},

您可以查看文档here

隐藏反应导航底部的特定选项卡

3 个答案: