react-native - 如何在 react-native 中向标签栏添加徽章？

Question

我正在使用 tabnavigator (createbottomBottomTabNavigator) 并且需要帮助使用 redux 计算百吉饼数量。

Answer 1

您始终可以创建自定义组件，在本例中为选项卡项 ( <TabBarItem /> )。



我创建了一个简单的演示，这里是小吃链接:https://snack.expo.io/@abranhe/tab-badge-count-redux

在此示例中，您有 3 个页面/选项卡(应用程序、导航和配置文件)，因此您需要管理每个页面/选项卡的通知计数器。所以我们从创建组件开始，我使用的是 Native Base具有预构建的组件。此外，我们有以下初始状态。

export default {
  apps: {
    notificationCount: 7,
  },
  navigation: {
    notificationCount: 0,
  },
  profile: {
    notificationCount: 3,
  },
};

TabBarItem.js

import React from 'react';
import { connect } from 'react-redux';
import { View, StyleSheet } from 'react-native';
import { Badge, Button, Icon, Text } from 'native-base';

const renderBadge = ({ badgeProps, counter }) => (
  <Badge {...badgeProps} style={styles.badge}>
    <Text style={styles.notificationText}>{counter}</Text>
  </Badge>
);

function TabBarItem({ notificationCount, badgeProps, icon, label, color }) {
  let counter = 0;

  switch (icon) {
    case 'apps':
      counter = notificationCount.apps;
      break;
    case 'navigate':
      counter = notificationCount.navigation;
      break;
    case 'person':
      counter = notificationCount.profile;
      break;
    default:
      counter = 0;
  }

  return (
    <View style={styles.container}>
      {counter > 0 && renderBadge({ counter, badgeProps })}
      <View style={styles.iconContainer}>
        <Icon name={icon} style={{ color }} />
        <Text style={{ color, ...styles.label }}>{label}</Text>
      </View>
    </View>
  );
}

const styles = ....;

const mapStateToProps = state => ({
  notificationCount: {
    apps: state.apps.notificationCount,
    navigation: state.navigation.notificationCount,
    profile: state.profile.notificationCount,
  },
});

export default connect(mapStateToProps)(TabBarItem);

这只是一种解决方法，正如您所看到的，我正在创建一个连接到 Redux 的组件，并根据图标名称 Prop 检查应呈现哪个选项卡。如果我们只有一个带有通知的选项卡，我们只需要访问 Redux 上的数据，并自动呈现。

我们需要创建一个 reducer 来处理 Increment 和 Decrement Action

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case 'APPS.INCREMENT':
      return {
        ...state,
        apps: {
          ...state.apps,
          notificationCount: state.apps.notificationCount + 1,
        },
      };

    case 'APPS.DECREMENT':
      return {
        ...state,
        apps: {
          ...state.apps,
          notificationCount: state.apps.notificationCount - 1,
        },
      };
  ...
}

我们还需要添加创建的组件:

import React from 'react';
import { connect } from 'react-redux';
import { StyleSheet } from 'react-native';
import { Container, Content, H1, H3 } from 'native-base';
import NotificationCounter from '../components/NotificationCounter';

const Apps = ({ notificationCount, dispatch }) => (
  <Container>
    <Content contentContainerStyle={styles.container}>
      <H1>Apps Page</H1>
      <NotificationCounter
        handleIncrement={() => dispatch({ type: 'APPS.INCREMENT' })}
        handleDecrement={() => dispatch({ type: 'APPS.DECREMENT' })}
      />
      <H3>Notification Count: {notificationCount}</H3>
    </Content>
  </Container>
);

const styles = ...

const mapStateToProps = state => ({
  notificationCount: state.apps.notificationCount,
});

export default connect(mapStateToProps)(Apps);

我们正在使用 dispatch({ type: 'APPS.INCREMENT' })触发增加应用程序选项卡通知的操作。
<NotificationCounter />组件代码:

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

export default ({ handleDecrement, handleIncrement }) => (
  <View style={styles.container}>
    <Button onPress={handleDecrement}>
      <Text>Decrement</Text>
    </Button>
    <Button onPress={handleIncrement}>
      <Text>Increment</Text>
    </Button>
  </View>
);

const styles = ...