Question

问题：

我创建了一个React Native应用程序。我在这里使用带有底部标签导航器的react native堆栈导航器。这就是它的样子。

这是我的应用程序的外观。

我想做的是删除底部标签上带圆圈的标题栏和绿色带圆圈的线。

这是我的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', }, ); 或在您正在使用的类中使其返回函数

如何在React导航中从Tab导航隐藏标题？

1 个答案: