有没有办法在使用 createBottomTabNavigator 和 createStackNavigator 并且同时使用 navigationOptions 时隐藏选项卡项？答案

【问题标题】：Is there a way to hide a tab item when using createBottomTabNavigator and createStackNavigator and at the same time navigationOptions working?有没有办法在使用 createBottomTabNavigator 和 createStackNavigator 并且同时使用 navigationOptions 时隐藏选项卡项？
【发布时间】：2019-07-02 09:07:14
【问题描述】：

我有三个屏幕，我只想将 te 标签栏用于前两个屏幕。在这两个屏幕中，我放置了一个导航到第三个屏幕的按钮。我的第一个方法是 tis 代码：

import React from "react";
import { Platform } from "react-native";
import {
  createStackNavigator,
  createBottomTabNavigator,
  StackViewTransitionConfigs
} from "react-navigation";

import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/HomeScreen";
import LinksScreen from "../screens/LinksScreen";
import SettingsScreen from "../screens/SettingsScreen";

const Tabs = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: "Home",
      title: "Tahiry",
      tabBarIcon: ({ focused }) => (
        <TabBarIcon
          focused={focused}
          name={
            Platform.OS === "ios"
              ? `ios-information-circle${focused ? "" : "-outline"}`
              : "md-information-circle"
          }
        />
      )
    })
  },
  Links: {
    screen: LinksScreen,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: "Links",
      tabBarIcon: ({ focused }) => (
        <TabBarIcon
          focused={focused}
          name={Platform.OS === "ios" ? "ios-link" : "md-link"}
        />
      )
    })
  }
});

export default createStackNavigator({
  tabs: Tabs,
  Settings: SettingsScreen
});

它正在工作，但“navigationOptions”不起作用，所以如果我为标题设置标题（即使我设置了“header:null”也总是显示），它不会出现。我用下一个代码尝试了另一种方法，但我无法隐藏第三个标签项：

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Links',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
    />
  ),
};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),
};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
});

欢迎任何建议。

【问题讨论】：

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

【解决方案1】：

使用 defaultNavigationOptions 自定义您的 tabBar

defaultNavigationOptions: ({ navigation }) => ({
   // You can return any component that you like here!
    return <View>
       <View>
        <Text> Tab 1</Text>
       </View>
       <View>
        <Text> Tab =2</Text>
       </View>
    </View>
  },
}),

【讨论】：

【解决方案2】：

如果你想隐藏 StackNavigator 中的标签，你可以试试这个

   const HomeTab = createStackNavigator({
       Home:{screen: HomeScreen,},
       Settings:{screen: SettingsScreen,}
    }, {initialRouteName: 'Home', headerMode: 'none')}

    HomeTab.navigationOptions = ({navigation}) => {
      let tabBarVisible = true;
      if(navigation.state.index > 0){
        tabBarVisible = false;
      }

      return {
        tabBarVisible,
      }
    }

  const TabNavi = createBottomTabNavigator({
       Home:{screen: HomeTab,},
       Links :{screen: LinksScreen,},
    })

    export default TabNavi;

【讨论】：

【解决方案3】：

我终于设法让它工作了。解决方案来自第二种方法。首先，您必须像这样在堆栈中声明您的场景：

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  Details1: DetailsScreen
});

之后你必须单独导入tabBarIcon，我认为这是必要的，因为createStackNavigator没有TabBarIcon方法

import TabBarIcon from "../components/TabBarIcon";

您现在可以使用导航和图标，您可以在堆栈中添加任意数量的屏幕。并且您只为堆栈创建选项卡。

这是完整的例子：

import React from "react";
import {
  Platform,
  StatusBar,
  StyleSheet,
  View,
  Button,
  Text
} from "react-native";
import {
  createBottomTabNavigator,
  createStackNavigator,
  createAppContainer
} from "react-navigation";
import TabBarIcon from "../components/TabBarIcon";

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Details1!</Text>
      </View>
    );
  }
}

class DetailsScreen2 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Details2!</Text>
      </View>
    );
  }
}

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Home!</Text>
        <Button
          title="Go to Details1"
          onPress={() => this.props.navigation.navigate("Details1")}
        />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Settings!</Text>
        <Button
          title="Go to Details2"
          onPress={() => this.props.navigation.navigate("Details2")}
        />
      </View>
    );
  }
}

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  Details1: DetailsScreen
});
HomeStack.navigationOptions = {
  tabBarLabel: "Home",
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === "ios"
          ? `ios-information-circle${focused ? "" : "-outline"}`
          : "md-information-circle"
      }
    />
  )
};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
  Details2: DetailsScreen2
});

SettingsStack.navigationOptions = {
  tabBarLabel: "Maison",
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === "ios"
          ? `ios-information-circle${focused ? "" : "-outline"}`
          : "md-information-circle"
      }
    />
  )
};

export default createAppContainer(
  createBottomTabNavigator(
    {
      Home: HomeStack,
      Settings: SettingsStack
    },
    {
      /* Other configuration remains unchanged */
    }
  )
);

这是 tabBaricon.js 的内容

import React from 'react';
import { Icon } from 'expo';

import Colors from '../constants/Colors';

export default class TabBarIcon extends React.Component {
  render() {
    return (
      <Icon.Ionicons
        name={this.props.name}
        size={26}
        style={{ marginBottom: -3 }}
        color={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
      />
    );
  }
}

【讨论】：