如何在选项卡栏react native中的图标顶部添加一行

在React Native中，在选项卡栏的图标顶部添加一行可以通过自定义组件来实现。以下是一种可能的实现方式：

首先，创建一个自定义组件，例如TabIconWithBadge，用于显示选项卡图标和顶部的额外行。该组件可以接受两个属性：icon表示选项卡图标，badge表示顶部的额外行文本。

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

const TabIconWithBadge = ({ icon, badge }) => {
  return (
    <View>
      <Image source={icon} />
      <Text>{badge}</Text>
    </View>
  );
};

export default TabIconWithBadge;

在使用选项卡的地方，例如一个TabNavigator组件中，使用TabIconWithBadge组件替代原始的图标组件。

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

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabIconWithBadge
              icon={focused ? require('./images/home_active.png') : require('./images/home_inactive.png')}
              badge="New"
            />
          ),
        }}
      />
      {/* 其他选项卡 */}
    </Tab.Navigator>
  );
};

export default App;

在上述代码中，Tab.Screen的tabBarIcon属性使用了TabIconWithBadge组件，并传递了选项卡图标和顶部的额外行文本作为属性。

这样，就可以在选项卡栏的图标顶部添加一行文本。你可以根据需要自定义TabIconWithBadge组件的样式和布局。

注意：以上代码仅为示例，实际使用时需要根据项目的具体情况进行调整和扩展。