在React本地中，图标和文本在BottomTabNavigator中重叠

z31licg0 于 2022-12-24 发布在 React

关注(0)|答案(1)|浏览(185)

当前：

预期：

以下代码仅适用于主页选项卡：

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文本旁边的图标，只有当foucused或说，当当前路线是Home和药丸一样，粉红色的边界
如何使它像上面预期的那样？

react-native

来源：https://stackoverflow.com/questions/74299155/icon-text-overlap-in-bottomtabnavigator-in-react-native

1条答案

按热度按时间

pzfprimi1#

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;

这会帮你

赞(0）回复(0）举报 2022-12-24

我来回答

在React本地中，图标和文本在BottomTabNavigator中重叠

1条答案

相关问题

热门标签

最新问答