![](/img/trans.png)
[英]How to implement a BottomTabNavigator in React Native?
[英]icon & text overlap in BottomTabNavigator in react native
当前的:
预期的:
以下代码仅适用于主页选项卡:
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
且带有粉红色边框等药丸时
如何使它像上面预期的那样?
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;
这会帮助你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.