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

Question

我想知道如何隐藏执行react-navigationhttps://reactnavigation.org/后默认添加的工具栏

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

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

要仅隐藏一个屏幕的标题，请在 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 3

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

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 4

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

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

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

Answer 5

为了隐藏工具栏，你可以试试下面的代码：

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

干杯:)

Answer 6

查看发行说明，它是 header: null，而不是 header: { visible: false }。这是一个突破性的变化。

您可以查看此链接https://github.com/react-navigation/react-navigation/issues/1275#issuecomment-297718049