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

Question

我想知道如何隐藏执行后默认添加的工具栏 react-navigation https://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

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

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

干杯:)

Answer 2

  static navigationOptions = {
    header: null ,
  };

这对我有用

class SplashScreen extends Component {

  static navigationOptions = {
    header: null ,
  };

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

Answer 3

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

你可以看看这个linkhttps://github.com/react-navigation/react-navigation/issues/1275#issuecomment-297718049

Answer 4

对于最终来到这里的任何人，我相信最 up-to-date 禁用整个应用程序 header 的答案如下所示：

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

请注意，现在是 headerMode: 'none'。我试了 header: null 没用。

Answer 5

要仅在一个屏幕上隐藏 header，请在 createStackNavigator 函数中执行此操作：

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

为 createStackNavigator 的所有屏幕隐藏 header(工具栏) 添加

{
  headerMode:'none'
}

里面 createStackNavigator。像这样：

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

注意：我使用的是 createStackNavigator，其他人可能是 StackNavigator。因此，如果您使用的是 StackNavigator，请像我在 createStackNavigator

中所做的那样进行所有更改

Answer 6

出于某种原因，我能找到的所有答案都来自 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, 这样就可以了

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

How to hide toolbar in react navigation

android

react-native

react-navigation