React-Navigation打造RN项目动态底部导航栏：贴心指引

2023-11-23 08:48:37

如何在RN项目中实现React-Navigation动态底部导航栏？

去年一个App项目提出了一个需求：由于要区分很多渠道，同时还有很多用户状态，项目中使用React-Native框架，路由库选择了react-navigation，所以要实现这个需求，必须改动react-navigation的一些代码，因为默认情况下，react-navigation的底部菜单都是写在路由文件里，如果想动态隐藏显示，必须实现一些动态加载的过程，开始来回折腾了。

实现动态菜单显示隐藏的主要思路是：在App.js文件里引入一个自定义的底部导航栏组件，然后在不同的场景下，通过改变这个组件的属性来控制菜单的显示和隐藏。

现在来看一下实现步骤，首先需要安装react-native-tab-navigator这个库，这个库可以用来创建底部导航栏，安装完成后，需要创建一个自定义的底部导航栏组件，这个组件需要继承自react-native-tab-navigator的TabNavigator组件，在组件中定义好底部导航栏的样式和菜单项，然后在App.js文件中引入这个自定义的底部导航栏组件，并把它作为根组件渲染。

接下来就是动态控制底部导航栏的显示和隐藏了，可以在App.js文件中定义一个状态变量来控制底部导航栏的显示和隐藏，然后在不同的场景下，通过改变这个状态变量的值来控制底部导航栏的显示和隐藏。

比如，如果想在登录页面隐藏底部导航栏，可以在登录页面中把状态变量的值设置为false，这样底部导航栏就会隐藏，如果想在主页面显示底部导航栏，可以在主页面中把状态变量的值设置为true，这样底部导航栏就会显示。

以上就是实现RN项目中实现React-Navigation动态底部导航栏的方法，希望对大家有所帮助。

1. 创建自定义底部导航栏组件

import React, { Component } from 'react';
import { TabNavigator } from 'react-native-tab-navigator';

export default class CustomBottomNavigation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'home'
    };
  }

  render() {
    return (
      <TabNavigator>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'home'}
          title="Home"
          onPress={() => this.setState({ selectedTab: 'home' })}
        >
          <View>
            <Text>Home</Text>
          </View>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'profile'}
          title="Profile"
          onPress={() => this.setState({ selectedTab: 'profile' })}
        >
          <View>
            <Text>Profile</Text>
          </View>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'settings'}
          title="Settings"
          onPress={() => this.setState({ selectedTab: 'settings' })}
        >
          <View>
            <Text>Settings</Text>
          </View>
        </TabNavigator.Item>
      </TabNavigator>
    );
  }
}

2. 在App.js文件中引入自定义底部导航栏组件

import React, { Component } from 'react';
import CustomBottomNavigation from './CustomBottomNavigation';

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

3. 动态控制底部导航栏的显示和隐藏

import React, { Component } from 'react';
import CustomBottomNavigation from './CustomBottomNavigation';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showBottomNavigation: true
    };
  }

  render() {
    return (
      <View>
        {this.state.showBottomNavigation ? <CustomBottomNavigation /> : null}
      </View>
    );
  }
}