如何删除单个选项卡的 tabBarLabel 并仅将 tabBarIcon 放在 tabnavigation 中反应本机？

Question

This is the HomeScreen.js code which has import of Directory.js as one of the tab in tabBar

This is Directory.js code which shows both tabBarlabel and tabBarIcon both on the Homescreen

This is how it looks on android app

我想在各个选项卡上设置 showLabel=false。但它不起作用。 我只想有目录图标，而不是两个标签和图标..

Homescreen.js 文件代码-

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View, Image,Dimensions
} from 'react-native';


import { TabNavigator } from 'react-navigation';
import ChatScreen from './ChatScreen.js';
import TaskScreen from './TaskScreen.js';
import FormScreen from './FormScreen.js';
import Directory from './Directory.js';
import Menu from './Menu.js';

const initialLayout = {
  height: 0,
  width: Dimensions.get('window').width,
};

var MainScreenNavigator = TabNavigator ({
  Directory:  {screen: Directory},
  ChatScreen: {screen: ChatScreen},
  TaskScreen: {screen: TaskScreen},
  FormScreen: {screen: FormScreen},
  Menu:       {screen: Menu},
 },
 {
  tabBarPosition: 'top',
  animationEnabled: true,
  tabBarOptions: {
    inactiveTintColor: '#9fffa9',
    activeTintColor: '#ffffff',
    showIcon: true,
    style: {
      backgroundColor: '#00dc17',
    },
    labelStyle:{
      fontSize: 16,
      fontWeight: '400',
      fontFamily: 'WorkSans-SemiBold',
    },
    tabStyle: {

    },
    indicatorStyle: {
      backgroundColor : '#fff',
      height : 2
    }
  },
}
);

MainScreenNavigator.navigationOptions ={
      header: false,

};

export default MainScreenNavigator;

Answer 1

将此添加到您的 Directory.js：

static navigationOptions = ({ navigation }) => ({
    tabBarLabel: <View/>
})