【问题标题】:Hide TabBar item in TabNavigator在 TabNavigator 中隐藏 TabBar 项
【发布时间】:2018-06-05 20:32:52
【问题描述】:

如何从 TabNavigator 中隐藏某些 TabBar 项。是否有某个TabBarOptions 选项,它有这样的visible key(true/false)?

const Tabs = TabNavigator({
  Home: {
    screen: Home
  },
  Profile: {
    screen: Thanks,
    tabBarOptions: {
      visible: false
    },
  },
  More: {
    screen: More
  },
})

【问题讨论】:

    标签: reactjs react-native react-navigation tabnavigator stack-navigator


    【解决方案1】:

    我的解决方案是返回一个自定义标签栏按钮,即:高度和宽度设置为 0 的视图,工作正常

    <Tabs.Screen name="Refer A Friend" component={WebViewComponent} 
        options={{
            tabBarButton: () => (
                <View style={{width:0, height:0}}></View>
            ),
            tabBarVisible:false //hide tab bar on this screen
    
        }}
    />
    

    更新:正如@Aman Deep 所指出的,您可以只返回 null

    <Tabs.Screen name="Refer A Friend" component={WebViewComponent} 
        options={{
            tabBarButton: () => null,
            tabBarVisible:false //hide tab bar on this screen
    
        }}
    />
    

    【讨论】:

    • 很高兴帮助 xD @AmanDeep
    【解决方案2】:

    tabBarOptions 的问题在于仅隐藏所选屏幕的当前导航(选项卡)。但不隐藏/显示选项卡。

    tabBarOptions: {
          visible: false
        }
    

    自定义解决方案

    我使用createMaterialTopTabNavigator做了一些特殊的课程来实现这一点

    export default class CustomTabsNavigator extends Component {
      // Final navigation setup with screens
      TabsNavigation;
    
      constructor(props) {
        super(props);
        // Only this is necessary if you just want to hide/show without change it.
        this._setScreens();
      }
      // This is necessary if you want to hide/show depending on some user behavior
      componentDidUpdate(prevProps) {
        // Add your condition to avoid infinite renders
        if (prevProps.foo === this.props.foo) return;
        this._setScreens();
      }
      // Actual code to show/hide based on props.
      _setScreens = () => {
        const { isAdmin } = this.props;
        const screens = {};
        const settings = {
          tabBarOptions: {
            style: {...}
          }
        };
        // Set tabs depending on user and state
        if (isAdmin) {
          screens.Dashboard = {
            screen: DashboardScreen,
            navigationOptions: { ... }
          };
        }
        screens.Home = { screen: HomeScreen };
        this.TabsNavigation = createMaterialTopTabNavigator(screens, settings);
        // Since we are not using setState
        this.forceUpdate();
      };
    
      render() {
        // AppContainer is required in react-native version 3.x
        const { props } = this;
        const NavigatorTabs = createAppContainer(this.TabsNavigation);
        return <NavigatorTabs screenProps={{ ...props }} />;
      }
    }
    

    标签的实现:

    <CustomTabsNavigator isAdmin={true} />
    
    

    【讨论】:

    • 我希望在 tabBar 中隐藏 one route。我就是这样做的:tabBarButton:(props)=&gt; null 在选项中options: { tabBarButton:(props)=&gt; null ,//will hide the clickable option tabBarVisible:false // will hide the Tab from this route },
    【解决方案3】:

    没有用于从 TabNavigator 隐藏特定项目的“可见”选项。

    您需要创建一个 Stacknavigator 和一个 Tabnavigator。在 Stacknavigator 中,您将添加您的“不可见”标签栏项目,并在最后添加其“可见”标签栏项目的 Tabnavigator。

    作者:@ragnorc 来自GitHub

    const TabsScreen = TabNavigator({
      Profile: { // visible TabBar item
        screen: Thanks,
        tabBarOptions: {
          visible: false
        },
      },
      More: { // visible TabBar item
        screen: More
      },
    })
    
    const MainScreenNavigator = StackNavigator({
        Home: { // invisible TabBar item
            screen: Home,
            navigationOptions : {
                header: null /* hide header*/
            }
        },
        Screen 2: { }, // invisible TabBar item
        Screen 3: { }, // invisible TabBar item
        Screen 4: { }, // invisible TabBar item
        TabsScreen: { 
            screen: TabsScreen,
            navigationOptions : {
                header: null /* hide header*/
            }
        },
    });
    

    【讨论】:

      【解决方案4】:

      虽然有talk of its implementation,但没有针对单个标签的“可见”选项。

      可以只呈现某些选项卡。您可以通过将您希望在特定时间出现的特定选项卡传递给 TabNavigator 来动态呈现您的 TabNavigator。您无需将参数硬编码到 TabNavigator(),而是将参数设置为表示要呈现的选项卡的对象,然后您可以随着时间的推移对该对象进行更改。

      请参阅here 了解此功能的巧妙实现。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-02-26
        • 1970-01-01
        • 2021-10-30
        • 2021-06-04
        • 1970-01-01
        • 2011-08-17
        相关资源
        最近更新 更多