ChargEco/Strides-APP/app/pages/alert/Notification.js

/**
 * 通知功能页面适配器
 * @邠心vbe on 2023/08/17
 */
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import React, { Component } from 'react';
import { StyleSheet, BackHandler } from 'react-native';
import { PageList } from '../Router';
import Alerts from './Alerts';
import Promotions from './Promotions';
import app from '../../../app.json';
import utils from '../../utils/utils';

export default class Notification extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false
    };
    this.pageAdapter = [{
      title: $t('notification.tabPromotions'),
      name: "Promotions",
      component: Promotions
    }, {
      title: $t('notification.tabAlerts'),
      name: "Alerts",
      component: Alerts
    }]
    this.tabBarStyle = {
      tabBarStyle: styles.tabStyle,
      tabBarPressColor: rippleColor,
      tabBarScrollEnabled: false,
      tabBarIndicatorStyle: styles.indicator,
      tabBarActiveTintColor: app.isWhitelabel ? textPrimary : colorLight,
      tabBarInactiveTintColor: app.isWhitelabel ? textSecondary : "#E0E0E0"
    }
    this.isHide = false;
  }

  componentDidMount() {
    utils.setBackClick([this.props?.route?.name, "Alerts", "Promotions"], this.backPage)
    this.props.navigation.addListener('focus', () => {
      this.isHide = false;
    });
    this.props.navigation.addListener('blur', () => {
      this.isHide = true;
    });
    //BackHandler.addEventListener('hardwareBackPress', this.backPage)
  }

  componentWillUnmount() {
    //BackHandler.removeEventListener("hardwareBackPress", this.backPage)
  }

  backPage = () => {
    //const params = this.props.route.params;
    if (!this.isHide) {
      startPage(PageList.home);
      return true;
    }
  }

  render() {
    const Tab = createMaterialTopTabNavigator();
    return (
      <Tab.Navigator
        style={styles.container}
        screenOptions={{
          lazy: false,
          lazyPreloadDistance: 1,
          ...this.tabBarStyle
        }}
        backBehavior={() => this.backPage()}>
        { this.pageAdapter.map((item, index) => 
          <Tab.Screen
            key={index}
            name={item.name}
            component={item.component}
            options={{
              title: item.title,
              tabBarAllowFontScaling: false
            }}
          />
        )}
      </Tab.Navigator>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colorLight
  },
  tabStyle: {
    backgroundColor: app.isWhitelabel ? colorLight : colorPrimary
  },
  indicator: {
    backgroundColor: app.isWhitelabel ? colorPrimary : colorLight
  }
})