如何在React Native中创建自定义底部选项卡栏？

npm install @react-navigation/native

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

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

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

function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

function HomeScreen() {
  return (
    // 屏幕内容
  );
}

HomeScreen.navigationOptions = {
  tabBarIcon: ({ focused, color, size }) => (
    <Icon name="home" size={size} color={color} />
  ),
  tabBarLabel: 'Home',
};