Как скрыть заголовок от вкладки навигации в реактивной навигации?

Question

Проблема:

Я создал собственное приложение реакции.Там я использую встроенный навигатор стека с нижним навигатором вкладок.Вот как это выглядит.

Вот так выглядит мое приложение.

То, что я хочу сделать, это удалить обведенную строку заголовка и кружок зеленого цвета над нижними вкладками.

Это мой файл app.js.

import React from "react";
import Login from "./src/components/Login/Login";
import Register from "./src/components/Register/Register";
import Route from './src/route'

export default class App extends React.Component {
  render() {
    return (
      <Route></Route>
    );
  }
}

Это мой файл route.js.

import React, { Component } from "react";
import { createAppContainer } from "react-navigation";
// import { createStackNavigator } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createStackNavigator } from "react-navigation-stack";
import IonIcon from "react-native-vector-icons/Ionicons";
import { Image } from "react-native";

import LoginScreen from "./components/Login/Login";
import HomeScreen from "./components/Home/Home";
import FinesScreen from "./components/Fines/Fines";
import LocationScreen from "./components/Location/Location";
import SettingsScreen from "./components/Settings/Settings";

const TabNav = createBottomTabNavigator(
  {
    home: {
      screen: HomeScreen,

      navigationOptions: {
        tabBarLabel: false,
        tabBarIcon: () => (
          <Image source={require("../assets/invalid-name.png")} />
        )
      }
    },
    fines: {
      screen: FinesScreen,
      navigationOptions: {
        tabBarLabel: false,
        headerMode: "none",
        tabBarIcon: () => (
          <Image source={require("../assets/icon-service-fines.png")} />
        )
      }
    },
    location: {
      screen: LocationScreen,
      navigationOptions: {
        tabBarLabel: false,
        headerMode: "none",
        tabBarIcon: () => <Image source={require("../assets/shape.png")} />
      }
    },
    settings: {
      screen: SettingsScreen,
      navigationOptions: {
        tabBarLabel: false,
        headerMode: "none",
        tabBarIcon: () => <Image source={require("../assets/settings.png")} />
      }
    }
  },
  {
    tabBarPosition: "bottom",
    swipeEnabled: true,
    animationEnabled: true,
    tabBarOptions: {
      activeTintColor: "#FFFFFF",
      inactiveTintColor: "#F8F8F8",
      style: {
        backgroundColor: "#fffff"
      },
      indicatorStyle: {
        borderBottomColor: "#87B56A",
        borderBottomWidth: 2
      }
    }
  }
);

const MainNavigator = createStackNavigator(
  {
    login: { screen: LoginScreen },
    tab: { screen: TabNav }
  },
  {
    initialRouteName: "login"
  },
  (navigationOptions = {
    headerMode: "none"
  })
);

const AppContainer = createAppContainer(MainNavigator);

export default AppContainer;

Это код моего домашнего экрана.

import React, { Component } from "react";

import {
  StyleSheet,
  KeyboardAvoidingView,
  View,
  ActivityIndicator,
  TouchableOpacity,
  TextInput,
  Text,
  Image,
  ScrollView
} from "react-native";


class Home extends Component{
    static navigationOptions = {
        header: null
    };

    render(){
        return(
            <View>
                <Text>Home</Text>
            </View>
        )
    }
}

export default Home;

Все остальные трехкомпонентные коды компонентов также похожи на home.

Я искал решение этой проблемы, но не смог этого сделать.Так может кто-нибудь помочь мне решить эту проблему?Спасибо

Answer 1

, если вы используете стековый навигатор, в createStackNavigator задайте для headerMode значение none i, e const Navigator = createStackNavigator( { Resume: Resume, Promotion: Promotion, }, { initialRouteName: 'Resume', headerMode: 'none', }, ); или в классе, подобном вашему, используйте функцию make it return