name属性将显示。因此，您需要将其更改为您想要显示的内容。

对于图标：-您可以使用'react-native-vector-icons'库来使用图标.库的链接[https：//www.npmjs.com/package/react-native-vector-icons]或者您可以按照此视频进行相同的[https：//www.youtube.com/watch？v = gkjYTapyEO8&ab_channel = Arslan]
对于标题：-无论你在组件的名称属性中给予什么名称，都会显示在标签栏中。我使用[https：//reactnavigation.org/docs/tab-based-navigation/][1]进行标签导航。

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/Ionicons';

export default function Layout() {
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, size}) => {
          let iconName;
          if (route.name === 'Foo') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Bar') {
            iconName = focused ? 'basketball' : 'basketball-outline';
          }
          return <Icon name={iconName} size={size} color={'pink'} />;
        },
        tabBarLabelStyle: {
          color: 'pink',
        },
        tabBarStyle: {
          backgroundColor: 'black',
        },
      })}>
      <Tab.Screen name="Foo" component={'You Component Name'} />
      <Tab.Screen name="Bar" component={'You Component Name'} />
    </Tab.Navigator>
  );
}