feat: tab navigation

src/router/TabsNavigation.js

@@ -2,7 +2,7 @@
  * @Author: zhuchuanyong
  * @Date: 2021-01-26 10:17:27
  * @LastEditors: zhuchuanyong
- * @LastEditTime: 2021-01-26 13:21:57
+ * @LastEditTime: 2021-01-27 11:07:54
  * @FilePath: \src\router\TabsNavigation.js
  */
 
@@ -10,18 +10,54 @@ import React from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import {Text, View} from 'react-native';
 import Home from '../views/Home';
 import Details from '../views/Details';
 const Tab = createBottomTabNavigator();
 
-export default function App() {
+/**
+ * 徽章计数
+ * @param {Object} obj 参数
+ * @param {string} obj.name 图标名称
+ * @param {number} obj.badgeCount - 角标数字
+ * @param {string} obj.color - 颜色
+ * @param {string} obj.size - 大小
+ */
+
+function IconWithBadge({name, badgeCount, color, size}) {
+  const ViewStyle = {
+    // On React Native < 0.57 overflow outside of parent will not work on Android, see https://git.io/fhLJ8
+    position: 'absolute',
+    right: -6,
+    top: -3,
+    backgroundColor: 'red',
+    borderRadius: 6,
+    width: 12,
+    height: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+  const TextStyle = {color: 'white', fontSize: 10, fontWeight: 'bold'};
+  return (
+    <View style={{width: 24, height: 24, margin: 5}}>
+      <Ionicons name={name} size={size} color={color} />
+      {badgeCount > 0 && (
+        <View style={ViewStyle}>
+          <Text style={TextStyle}>{badgeCount}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+export default function TabNavigation() {
   return (
     <NavigationContainer>
       <Tab.Navigator
         screenOptions={({route}) => ({
           tabBarIcon: ({focused, color, size}) => {
             let iconName;
-
+            //集中处理icon
             if (route.name === 'Home') {
               iconName = 'ios-information-circle';
               //   iconName = focused
@@ -33,7 +69,17 @@ export default function App() {
             }
 
             // You can return any component that you like here!
-            return <Ionicons name={iconName} size={size} color={color} />;
+            return (
+              //  Ionicons 只有图标
+              // <Ionicons name={iconName} size={size} color={color} />
+              // 含有徽章的图标
+              <IconWithBadge
+                name={iconName}
+                size={size}
+                color={color}
+                badgeCount={3}
+              />
+            );
           },
         })}
         tabBarOptions={{