如何删除单个选项卡的选项卡栏标签，并在反应本机的选项卡导航中仅放置选项卡栏图标

Question

这是主屏幕.js代码，它将目录导入.js作为选项卡栏中的选项卡之一

这是目录.js代码，在主屏幕上同时显示选项卡栏标签和选项卡栏图标

这就是它在安卓应用程序上的样子

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

主屏幕.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/>
})