Question

我正在使用react-navigation在屏幕之间进行导航。 createBottomTabNavigator 是否可以包含3个标签，但是当您显示标签栏时，我只希望看到2个标签，而不是3个。

Answer 1

为此我制作了一个npm软件包，请参阅；

https://www.npmjs.com/package/react-navigation-selective-tab-bar

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button } from "react-native";
import { createBottomTabNavigator, createAppContainer } from "react-navigation";
import BottomTabBar from "react-navigation-selective-tab-bar";
class ScreenOne extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Screen One</Text>
        <Text style={styles.number}>1</Text>
        <Text style={styles.instructions}>
          I AM on the bottom tab Navigator
        </Text>
        <View style={styles.buttons}>
          <Button
            title="One"
            onPress={() => this.props.navigation.navigate("One")}
          />
          <Button
            title="Two"
            onPress={() => this.props.navigation.navigate("Two")}
          />
          <Button
            title="Three"
            onPress={() => this.props.navigation.navigate("Three")}
          />
          <Button
            title="Four"
            onPress={() => this.props.navigation.navigate("Four")}
          />
        </View>
      </View>
    );
  }
}

class ScreenTwo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Screen Two</Text>
        <Text style={styles.number}>2</Text>
        <Text style={styles.instructions}>
          I am NOT on the bottom tab Navigator
        </Text>
        <View style={styles.buttons}>
          <Button
            title="One"
            onPress={() => this.props.navigation.navigate("One")}
          />
          <Button
            title="Two"
            onPress={() => this.props.navigation.navigate("Two")}
          />
          <Button
            title="Three"
            onPress={() => this.props.navigation.navigate("Three")}
          />
          <Button
            title="Four"
            onPress={() => this.props.navigation.navigate("Four")}
          />
        </View>
      </View>
    );
  }
}

class ScreenThree extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Screen Three</Text>
        <Text style={styles.number}>3</Text>
        <Text style={styles.instructions}>
          I AM on the bottom tab Navigator
        </Text>
        <View style={styles.buttons}>
          <Button
            title="One"
            onPress={() => this.props.navigation.navigate("One")}
          />
          <Button
            title="Two"
            onPress={() => this.props.navigation.navigate("Two")}
          />
          <Button
            title="Three"
            onPress={() => this.props.navigation.navigate("Three")}
          />
          <Button
            title="Four"
            onPress={() => this.props.navigation.navigate("Four")}
          />
        </View>
      </View>
    );
  }
}

class ScreenFour extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Screen Four</Text>
        <Text style={styles.number}>4</Text>
        <Text style={styles.instructions}>
          I am NOT on the bottom tab Navigator
        </Text>
        <View style={styles.buttons}>
          <Button
            title="One"
            onPress={() => this.props.navigation.navigate("One")}
          />
          <Button
            title="Two"
            onPress={() => this.props.navigation.navigate("Two")}
          />
          <Button
            title="Three"
            onPress={() => this.props.navigation.navigate("Three")}
          />
          <Button
            title="Four"
            onPress={() => this.props.navigation.navigate("Four")}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  },
  number: {
    fontSize: 50
  },
  buttons: {
    flexDirection: "row"
  }
});

const AppNavigator = createBottomTabNavigator(
  {
    One: {
      screen: ScreenOne
    },
    Two: {
      screen: ScreenTwo
    },
    Three: {
      screen: ScreenThree
    },
    Four: {
      screen: ScreenFour
    }
  },
  {
    tabBarComponent: props => {
      return (
        <BottomTabBar
          {...props} // Required
          display={["One", "Three"]} // Required
          background="black" // Optional
        />
      );
    }
  }
);

export default createAppContainer(AppNavigator);

Answer 2

将您的第三个项目/屏幕放在堆栈导航器中：

const Bottom = createBottomTabNavigator({
    item1: {screen: Screen1},
    item2: {screen: Screen2},
    },{
        initialRouteName: "item1",
    }
)

export default createStackNavigator({
    tabs: Bottom,
    item3: Screen3,
})

最后，要将屏幕更改为组件中的第三条路线，可以执行以下操作：

// ... 
import {withNavigation} from 'react-navigation' // IMPORTANT
export default class Example extends React.Component{
    render(){
        return(
            <TouchableOpacity onPress={() => this.props.navigation.navigate('item3')}>
        )
    }
}

export default withNavigation(Example) // IMPORTANT

Answer 3

https://github.com/react-navigation/react-navigation/issues/5230#issuecomment-649206507

编辑：为清楚起见，这就是您使用它的方式

    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarButton: [
          "Route1ToExclude",
          "Route2ToExclude"
        ].includes(route.name)
          ? () => {
              return null;
            }
          : undefined,
      })}
    >

这对我有用，您仍然可以导航到选项卡！我改成这样：

没有变量：

tabBarButton: ["About"].includes(route.name) ? () => null : undefined

带有隐藏特定标签的变量：

const hiddenTabs = ["About", "Food"];
tabBarButton: hiddenTabs.includes(route.name) ? () => null : undefined

使用变量仅显示特定选项卡：

const tabsToShow = ["About", "Food"];
tabBarButton: !tabsToShow.includes(route.name) ? () => null : undefined

所有功劳都归于Ben Awad！

Answer 4

例如，如果要在createBottomTabNavigator中有5条活动路线，但只有3条或其他数字可在TabBar中显示图标。在这种情况下，所有5条路线都将处于活动状态，您可以转到它们props.navigation.navigate（）

您必须将经过过滤的路由列表传递给TabBar组件，但是必须确保对象被深复制（例如，使用lodash）

import cloneDeep from 'lodash/cloneDeep';

....

const TabBarComponent = props => {
    const routeNamesToHide = [
        'MyOfficeStack',
        'ArenaStack',
        'SavedSearchesStack',
        'NotificationsStack',
    ];
    // Delete from TABBAR items in array 'routeNamesToHide'
    let newNavigation = cloneDeep(props.navigation);
    newNavigation.state.routes = newNavigation.state.routes.filter(
        item => !routeNamesToHide.includes(item.routeName)
    );
    //
    return <BottomTabBar {...props} navigation={{ ...newNavigation }} />;
};

const tabNavigator = createBottomTabNavigator(
    {
        SearchStack,
        FavouritesStack,
        AddScreenStack,
        MessagesStack,
        BookingsStack,
        MyOfficeStack,
        AreaStack,
        SavedSearchesStack,
        NotificationsStack,
    },
    {
        lazy: false,
        tabBarOptions: {
            showLabel: true,
        },
        tabBarComponent: props => (
            <TabBarComponent {...props} />
        ),
    }
);

反应导航隐藏一个标签

4 个答案: