使用 React Native 中的 React Navigation 在 StackNavigator 上隱藏標題

Question

我有以下幾點：

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home'
    },
  },
  Chat: {
    screen: ChatScreen,
    navigationOptions: {
      title: 'Chat with Lucy'
    }
  },
});

export default class App extends React.Component {
  render() {
    return <SimpleApp />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

在HomeScreen ，現在有一個標題，如下所示：

如何隱藏此標題？ 我只想要一個空白屏幕，或者在這種情況下，只需要顯示<Text>Hello, Chat App!</Text> ？

Answer 1

如果您想隱藏所有屏幕標題，則使用@pitty 或 @burhan 答案（盡管兩者都有相同的答案）但要專門刪除屏幕標題，則只需使用header: null作為React Navigation文檔中提到的屏幕道具，請使用它像這樣：

Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home',
      header: null //this will hide the header
    },
},

2020 年 2 月更新 ，現在隨着 新版本的堆棧發布，您需要使用參數headerShown ，默認值為 true，例如

Home: {
     screen: HomeScreen,
     navigationOptions: {
       title: 'Home',
       headerShown: false
     },
},

Answer 2

嘗試在您的stactNavigator添加{ headerMode: 'none' }

const SimpleApp = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home'
    },
  },
  Chat: {
    screen: ChatScreen,
    navigationOptions: {
      title: 'Chat with Lucy'
    }
  },
}, {headerMode: 'none'});

Answer 3

    const SimpleApp = StackNavigator({
      Home: {
        screen: HomeScreen,
        navigationOptions: {
          title: 'Home'
        },
      },
      Chat: {
        screen: ChatScreen,
        navigationOptions: {
          title: 'Chat with Lucy'
        }
      },
{ headerMode: 'none'}
);

Answer 4

試試這個

Login: {
    screen: Login,
    navigationOptions: {
      title: '',
      headerTransparent:true,
    }
  },

Answer 5

版本：5.x

headerShown是否顯示或隱藏屏幕的標題。 默認情況下顯示標題，除非：

導航器上的headerMode 屬性設置為無。 該屏幕位於嵌套在另一個具有標題的堆棧導航器屏幕中的堆棧中。 將此設置為false 會隱藏標題。 當標題隱藏在嵌套堆棧中時，您可以將其顯式設置為 true 以顯示它。

https://reactnavigation.org/docs/stack-navigator/#headershown

Answer 6

我認為在 stackNavigator 中，您可以使用headerMode: 'none'來隱藏標題。 還有一件事，您可以將此作為建議，使用

反應本地路由器通量

在 react-native 導航的情況下，這會更容易使用，在那里你可以使用hideNavBar道具隱藏標題到場景中，這里是文檔，它對你有幫助的同一個文檔

Answer 7

注意下面代碼中的options={{headerShown: false}} 。 它正在與我一起使用最新版本（^5.9.0）。 謝謝。

const App = () => {
      return (
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Home">
            <Stack.Screen
              name="Home"
              component={HomeScreen}
              options={{headerShown: false}}
            />
          </Stack.Navigator>
        </NavigationContainer>
      );
    };

Answer 8

const RootStack = createStackNavigator(
{
LandingPage: LandingPage,
HomeScreen: HomeScreen,
Login: Login
},
{
initialRouteName: 'LandingPage',
**header: null,
headerMode: 'none'**
}
);
const AppContainer = createAppContainer(RootStack);

您的導航選項應如下所示，只需在代碼中添加粗線即可。

Answer 9

headerMode: 'none'不適用於最新的 React Navigation。 要在導航器上禁用頂部屏幕設置screenOptions={{ header: () => null }}的默認標題：

    <SpaceStack.Navigator screenOptions={{ header: () => null }}>
      <SpaceStack.Screen name="Workspaces" component={WorkspaceScreen} />
      <SpaceStack.Screen name="Details" component={WorkspaceDetailScreen} />
    </SpaceStack.Navigator>

要禁用其他標題（由孩子或其他導航器設置）在屏幕上設置options={{ headerShown: false }} ：

    <SpaceStack.Navigator>
      <SpaceStack.Screen name="Workspaces" component={WorkspaceScreen} />
      <SpaceStack.Screen name="Details" options={{ headerShown: false }} component={WorkspaceDetailScreen} />
    </SpaceStack.Navigator>

要禁用來自嵌套 navigators子組件的標題，盡管它會在運行后從同一堆棧的其他屏幕中關閉它，請在子組件中設置：

  useLayoutEffect(() => {
    navigation.getParent().setOptions({ header: () => null });
  });