[英]icon & text overlap in BottomTabNavigator in react native
current:当前的:
expected:预期的:
Below Code for home tab only:以下代码仅适用于主页选项卡:
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>
)
}
I have tried to put marginLeft
to text but it icon also goes to left side, so not works我试图将marginLeft
放到文本中,但它的图标也移到左侧,所以不起作用
I also want Home
text beside of icon only if foucussed or say when current route is Home
and with pills like pink border我还想在图标旁边显示Home
文本,仅当关注或说当前路线为Home
且带有粉红色边框等药丸时
How to make it like expected above?如何使它像上面预期的那样?
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;
this will help you这会帮助你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.