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

PowerManager pm = (PowerManager) ctx.getSystemService(Context.POWER_SERVICE);
          wakeLock = pm.newWakeLock(PowerManager.FULL_WAKE_LOCK |
                  PowerManager.ACQUIRE_CAUSES_WAKEUP |
                  PowerManager.ON_AFTER_RELEASE, APPNAME + Integer.toString(index));
        if (wakeLock.isHeld()){
          wakeLock.acquire();
        }

这对我有用

  static navigationOptions = {
    header: null ,
  };

Answer 2

对于到此为止的任何人，我相信禁用整个应用程序标头的最新答案如下：

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

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

Answer 3

由于某种原因，我能找到的所有答案都来自React导航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

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

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

干杯：）

Answer 5

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

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

Answer 6

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

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

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

6 个答案: