如何在反应导航中隐藏工具栏

Question

我想知道如何隐藏https://reactnavigation.org/实施后默认添加的工具栏react-navigation

我有两个屏幕 - 启动器屏幕,我不想要工具栏和第二个屏幕,可以有工具栏.

index.android.js

/**
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import {
  AppRegistry,
  Image,
  View,
  Text,
  Button,
  StyleSheet
} from "react-native";
import { StackNavigator } from "react-navigation";
import EnableNotificationScreen from "./EnableNotification";

class SplashScreen extends Component {
  render() {
    console.disableYellowBox = true;
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Image source={require("./img/talk_people.png")} />
        <Text style={{ fontSize: 22, textAlign: "center" }}>
          Never forget to stay in touch with the people that matter to you.
        </Text>
        <View style={{ width: 240, marginTop: 30 }}>
          <Button
            title="CONTINUE"
            color="#FE434C"
            onPress={() => navigate("EnableNotification")}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#FFFFFF",
    alignItems: "center",
    justifyContent: "center",
    padding: 16,
    flex: 1,
    flexDirection: "column"
  }
});

const ScheduledApp = StackNavigator(
  {
    Splash: { screen: SplashScreen },
    EnableNotification: { screen: EnableNotificationScreen }
  },
  {
    initialRouteName: "Splash"
  }
);

AppRegistry.registerComponent("Scheduled", () => ScheduledApp);

EnableNotification.js

/**
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { View, Text } from "react-native";

export default class EnableNotificationScreen extends Component {
  render() {
    return <View><Text>Enable Notification</Text></View>;
  }
}

Answer 1

  static navigationOptions = {
    header: null ,
  };

这对我有用

class SplashScreen extends Component {

  static navigationOptions = {
    header: null ,
  };

  render() {
    console.disableYellowBox = true;
    const { navigate } = this.props.navigation;
    return (
      ...
    );
  }
}

Answer 2

对于最终来到这里的任何人，我相信禁用整个应用程序标题的最新答案如下所示：

export const Navigator = createStackNavigator({
  Register: { screen: Register },
  Login: { screen: Login },
},{
  headerMode: 'none',
  initialRouteName: 'Register',
})

请注意，现在是headerMode: 'none'. 我试过header: null无济于事。

Answer 3

要仅隐藏一个屏幕的标题，请在createStackNavigator函数中执行以下操作：

const Navigation= createStackNavigator({
  Splash: {
    screen:SplashScreen,
      navigationOptions: {
     header:null        // this will do your task
   }
  },
  Dashboard:{screen:Dashboard}
}
);

要为createStackNavigator的所有屏幕隐藏标题（工具栏），请添加

{
  headerMode:'none'
}

里面createStackNavigator。像这样：

const Navigation= createStackNavigator({
  Splash: {
    screen:SplashScreen
  },
  Dashboard:{screen:Dashboard}
}
,{
  headerMode:'none'
}
);

注意：我使用的createStackNavigator可能是StackNavigator其他人的。因此，如果您正在使用，StackNavigator请像我所做的那样进行所有这些更改createStackNavigator

Answer 4

由于某种原因，我能找到的所有答案都来自 React navigation v4，这在 v5 中不起作用。在花了一些时间之后，我想出了一种在 v5.5 中隐藏工具栏的方法。这里是：

import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";

...

const Stack = createStackNavigator();

....
//and inside render
render(){
    return (
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen
                name="Home"
                component={HomeScreen}
                options={{
                  title: "Home",
                  headerShown: false,
                }}
              />
}

headerShown: false, 这将解决问题

Answer 5

为了隐藏工具栏，您可以尝试以下代码：

const ScheduledApp = StackNavigator(
  {
    Splash: { screen: SplashScreen,
      navigationOptions: {
          header: {
            visible: false
          }
      }
    }
 },
    EnableNotification: { screen: EnableNotificationScreen,
        navigationOptions: {
          header: {
            visible: true
          }
        } 
    }
  },
  {
    initialRouteName: "Splash"
  }
);

干杯:)