反应原生导航隐藏导航栏 - Javascript

在 React Native 中，导航栏是以原生的方式实现的。但是，在某些场景下，我们可能需要隐藏导航栏，比如登录页、启动页等等。那么，在 React Native 中如何实现隐藏导航栏呢？

方案

我们可以使用 react-navigation 库提供的 StackNavigationOptions 来控制导航栏的显示。

假设我们要隐藏导航栏的页面是 LoginScreen，那么我们可以在该页面的 componentDidMount 中设置 StackNavigationOptions 的 headerShown 属性为 false。代码如下：

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class LoginScreen extends Component {
  componentDidMount() {
    this.props.navigation.setOptions({
      headerShown: false,
    });
  }

  render() {
    return (
      <View>
        <Text>LoginScreen</Text>
      </View>
    );
  }
}

export default LoginScreen;

需要注意的是，在我们离开该页面时，需要将 StackNavigationOptions 的 headerShown 属性设置为 true，否则在下一个页面可能会出现导航栏未显示的情况。

我们可以在 componentWillUnmount 生命周期钩子中设置 StackNavigationOptions 的 headerShown 属性为 true。代码如下：

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class LoginScreen extends Component {
  componentDidMount() {
    this.props.navigation.setOptions({
      headerShown: false,
    });
  }

  componentWillUnmount() {
    this.props.navigation.setOptions({
      headerShown: true,
    });
  }

  render() {
    return (
      <View>
        <Text>LoginScreen</Text>
      </View>
    );
  }
}

export default LoginScreen;

总结

在 React Native 中隐藏导航栏可以使用 react-navigation 库提供的 StackNavigationOptions，通过设置 headerShown 属性来控制导航栏的显示。在需要隐藏导航栏的页面的 componentDidMount 生命周期钩子中设置 headerShown 属性为 false，在离开该页面时，需要将 headerShown 属性设置为 true。