我已将其用于导航:https://reactnavigation.org/docs/material-top-tab-navigator
并将其设置到底部,设置图标看起来很漂亮。但是如果我将 Icon Size 从 22 更改为 32,那么我只能看到超过一半的 Icon。我怎样才能解决这个问题 ?我没有找到任何可以解决此问题的方法。
感谢您的帮助
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import * as Font from 'expo-font';
import { createStackNavigator, HeaderTitle } from '@react-navigation/stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { NavigationContainer } from '@react-navigation/native';
import AppLoading from 'expo-app-loading';
import { FontAwesome5, AntDesign } from '@expo/vector-icons';
import Shopping from './screens/shopping';
import Discover from './screens/discover';
import Product from './screens/product';
import Search from './screens/search';
import Profile from './screens/profile';
const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();
const AppTabs = () => {
return (
<Tab.Navigator
shifting={true}
tabBarPosition="bottom"
activeColor={true}
tabBarOptions={
{
tabStyle: {
backgroundColor: '#fff',
padding: 6,
margin: 2
},
indicatorStyle:{backgroundColor: 'red'},
showLabel: false,
activeTintColor: '#333',
labelStyle: {
fontSize: 32
},
iconStyle: {
color: '#333',
},
showIcon: true
}
}
>
<Tab.Screen
name="Home"
component={Discover}
iconStyle={true}
activeColor={true}
options={{
tabBarColor: 'blue',
tabBarIcon: ({ focused, color }) => (
<FontAwesome5 name="globe" size={22} color="black"/>
),
}}
/>
<Tab.Screen
name="Search"
component={Search}
iconStyle={true}
activeColor={true}
options={{
tabBarLabel: 'Suche',
tabBarColor: 'red',
tabBarIcon: ({ focused, color }) => (
<AntDesign name="search1" size={22} color="black" />
)
}}
/>
<Tab.Screen
name="Product"
component={Product}
iconStyle={true}
activeColor={true}
options={{
tabBarLabel: 'Plus',
tabBarColor: 'red',
tabBarIcon: ({ focused, color }) => (
<AntDesign name="pluscircle" size={36} color="red" />
)
}}
/>
<Tab.Screen
name="Shopping"
component={Shopping}
iconStyle={true}
activeColor={true}
options={{
tabBarLabel: 'Plus',
tabBarColor: 'red',
tabBarIcon: ({ focused, color }) => (
<AntDesign name="shoppingcart" size={22} color="black" />
)
}}
/>
<Tab.Screen
name="Profile"
component={Profile}
iconStyle={true}
activeColor={true}
options={{
tabBarLabel: 'Plus',
tabBarColor: 'red',
tabBarIcon: ({ focused, color }) => (
<AntDesign name="user" size={22} color="black" />
)
}}
/>
</Tab.Navigator>
)
};
@修复:
<View style={{
flex: 1,
width: width * 5
}}>
<AntDesign name="pluscircle" size={32} style={{width: '100%'}} color="red" />
</View>