如何在 React native 中隐藏 header - 功能组件

Question

我们正在进行 react-native 项目。由于我们有自定义 header，因此我们过去常常使用 class 组件中的以下行隐藏默认值 header。

static navigationOptions = {
    header: null
  };

但是目前，我们正在创建带有钩子的新页面，钩子是功能组件。上面的行无助于隐藏功能组件中的默认 header。

如何使用功能组件隐藏默认 header。

我们有一个解决方案，将 header 隐藏在堆栈导航器本身中。

在 createStackNavigator 内部，

defaultNavigationOptions: {
    gesturesEnabled: true,
    header: null
  }

但这将隐藏堆栈导航器中所有页面的 header。但是如果我们需要隐藏特定页面，解决方案是什么？

感谢任何宝贵的建议。

Answer 1

如果您使用的是 Navigation V5。你可以像下面那样初始化堆栈时，您可以将 headerShown 设置为 false

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{headerShown: false}}
/>

或者如果你想在组件内部做，你可以这样做

  <Button
    title="Update the title"
    onPress={() => navigation.setOptions({ headerShown: false })}
  />

我已经给出了一个使用按钮点击的示例，但您可以根据需要在任何地方调用它。

如果您想使用旧版本使用的导航选项，您必须像下面那样使用静态属性。

const HomeScreen = props => {
    return <View><Text>Home</Text></View>
}
HomeScreen['navigationOptions'] = screenProps => ({
   header: null
})

Answer 2

不知道我是否理解你的意思。我认为你正在使用反应导航。

有多种申请方式react-navigation。

1**> 你可以将 createStackNavigator 放在 jsx 上，并在每个组件或路由上添加选项 headerOptions on false，如下所示：

import * as React from 'react';

// react navigation
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

// components
import Home from './src/components/home';
import Login from './src/components/common/login';

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

export default App;

在这个例子中，我创建了两个组件来路由（Home 和 Login），添加 options={{headerShown: false}} 默认情况下 header 将消失。

2**> 第二种方法是直接在 object 上，然后将选项 headerMode:"none" 设置为不显示 header整个导航器：

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

// components
import Home from './src/components/home';
import Login from './src/components/common/login';

const App = createStackNavigator({ 
    Home: {screen: Home},
    Login: {screen: Login},
    
},{
    initialRouteName:'Home',
    headerMode:"none",
});

export default createAppContainer(App);

第二个选项是最短的，但你没有使用箭头函数并应用 redux 我更喜欢第一个选项来包装 Provider，但无论如何你可以使用两者之一。

我希望这就是您要找的。最好的问候

如何在 React native 中隐藏 header - 功能组件

How to hide header in React native - functional component

javascript

hook

header

react-native

react-functional-component