react-native Text中tabLabel红了 ts写法

在 Native中，使用TypeScript编写带有Tab导航的组件可以使用`createBottomTabNavigator`或`createMaterialBottomTabNavigator`函数来创建。如果你想在底部Tab导航中设置标签的文本和图标，可以使用`tabBarLabel`和`tabBarIcon`属性。

以下是一个简单的示例代码：

import * as React from 'react';
import { Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

type Props = {};

const Tab = createBottomTabNavigator();

const HomeScreen = () => {
  return <Text>Home Screen</Text>;
};

const SettingsScreen = () => {
  return <Text>Settings Screen</Text>;
};

const TabNavigator = (props: Props) => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarLabel: 'Settings',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="settings" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default TabNavigator;

在这个示例中，我们使用了`createBottomTabNavigator`函数来创建一个底部Tab导航组件。在`Tab.Screen`组件中，我们可以使用`options`属性来设置标签的文本和图标。 在这里，我们使用了`tabBarLabel`属性来设置标签的文本，使用了`tabBarIcon`属性来设置标签的图标，并且使用了`MaterialCommunityIcons`组件来渲染图标。