BottomTabNavigator 中的圖標和文本在 React Native 中重疊

Question

當前的：

預期的：

以下代碼僅適用於主頁選項卡：

function MyTabs() {
   return(
     <Tab.Navigator
        initialRouteName="Dashboard"
        screenOptions={{
          tabBarActiveTintColor: "#e91e63",
          tabBarStyle: {
            paddingTop: 15,
            height: 80,
            paddingBottom: 15,
            borderTopWidth: 0,
            paddingHorizontal: 15
          }
        }}
      >
       <Tab.Screen
          name="Home"
          component={HomePage}
          options={{
            headerShown: false,
            tabBarLabelPosition: "beside-icon",
            tabBarLabelStyle: {
              fontSize: 14,
              fontFamily: "Gilroy-Medium",
            },
            tabBarLabel: ({ focused }) => {
              return (
                <Text
                  style={{
                    fontFamily:"Gilroy-Medium"
                    fontSize:14
                    fontWeight:"500"
                    color:"#D6407A"
                  }}
                >
                  {focused ? "Home" : ""}
                </Text>
              );
            },
            tabBarIcon: ({ focused }) =>
              focused ? (
                <Image
                  source={require("./src/assets/Homefill.png")}
                  style={{ resizeMode: "contain", height: 30, width: 30 }}
                />
              ) : (
                <Image
                  source={require("./src/assets/Home.png")}
                  style={{ resizeMode: "contain", height: 30, width: 30 }}
                />
              ),
          }}
        />
    </Tab.Navigator>
   )
}

我試圖將marginLeft放到文本中，但它的圖標也移到左側，所以不起作用

我還想在圖標旁邊顯示Home文本，僅當關注或說當前路線為Home且帶有粉紅色邊框等葯丸時

如何使它像上面預期的那樣？

Answer 1

import React, { useEffect } from 'react';
import { Text, View, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';


function HomeScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home!</Text>
        </View>
    );
}

function SettingsScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings!</Text>
        </View>
    );
}

const Tab = createBottomTabNavigator();

function App() {
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarActiveTintColor: 'tomato',
                tabBarInactiveTintColor: 'gray',
            })}>
            <Tab.Screen
                name="HomeScreen"
                component={HomeScreen}
                options={{
                    headerShown: false,
                    tabBarLabelPosition: 'beside-icon',
                    tabBarLabelStyle: {
                        fontSize: 14,
                        fontFamily: 'Gilroy-Medium',
                    },
                    tabBarLabel: ({ focused }) => {
                        return (
                            <Text>
                                {focused ?
                                    <>
                                        <Text>Home</Text>   <Icon name="home" size={30} />
                                    </>
                                    : null}
                            </Text>
                        );
                    },
                    tabBarIcon: ({ focused }) =>
                        focused ? null : <Icon name="home" size={30} />,
                }}
            />
            <Tab.Screen
                name="SettingsScreen"
                component={SettingsScreen}
                options={{
                    headerShown: false,
                    tabBarLabelPosition: 'beside-icon',
                    tabBarLabelStyle: {
                        fontSize: 14,
                        fontFamily: 'Gilroy-Medium',
                    },
                    tabBarLabel: ({ focused }) => {
                        return (
                            <Text>
                                {focused ?
                                    <>
                                        <Text style={{textAlign:'center'}}>setting</Text>   <Icon name="gear" size={30} />
                                    </>
                                    : null}
                            </Text>
                        );
                    },
                    tabBarIcon: ({ focused }) =>
                        focused ? null :<Icon name="gear" size={30} />,
                }}
            />
        </Tab.Navigator>
    );
}

const Home = () => {
    return (
        <NavigationContainer>
            <App />
        </NavigationContainer>
    )
}
export default Home;

這會幫助你