反应导航隐藏一个标签

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

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

所有功劳都归功于本·阿瓦德！

Answer 3

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

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