提交 33d77043 编辑于 作者: zhuchuanyong's avatar zhuchuanyong
浏览文件

feat: tab navigation

上级 0a383897

src/router/TabsNavigation.js

+50 −4
原始行号 原始行 差异行号 差异行
@@ -2,7 +2,7 @@ 
 * @Author: zhuchuanyong

 * @Author: zhuchuanyong

 * @Date: 2021-01-26 10:17:27

 * @Date: 2021-01-26 10:17:27

 * @LastEditors: zhuchuanyong

 * @LastEditors: zhuchuanyong

 * @LastEditTime: 2021-01-26 13:21:57

 * @LastEditTime: 2021-01-27 11:07:54

 * @FilePath: \src\router\TabsNavigation.js

 * @FilePath: \src\router\TabsNavigation.js

 */

 */
@@ -10,18 +10,54 @@ import React from 'react'; 
import {NavigationContainer} from '@react-navigation/native';

import {NavigationContainer} from '@react-navigation/native';

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import Ionicons from 'react-native-vector-icons/Ionicons';

import Ionicons from 'react-native-vector-icons/Ionicons';

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

import Home from '../views/Home';

import Home from '../views/Home';

import Details from '../views/Details';

import Details from '../views/Details';

const Tab = createBottomTabNavigator();

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 (

  return (

    <NavigationContainer>

    <NavigationContainer>

      <Tab.Navigator

      <Tab.Navigator

        screenOptions={({route}) => ({

        screenOptions={({route}) => ({

          tabBarIcon: ({focused, color, size}) => {

          tabBarIcon: ({focused, color, size}) => {

            let iconName;

            let iconName;



            //集中处理icon

            if (route.name === 'Home') {

            if (route.name === 'Home') {

              iconName = 'ios-information-circle';

              iconName = 'ios-information-circle';

              //   iconName = focused

              //   iconName = focused
@@ -33,7 +69,17 @@ export default function App() { 
            }

            }





            // You can return any component that you like here!

            // 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={{

        tabBarOptions={{