我试图将自定义 png 图标放入我的选项卡导航器中,但它们被剪掉了。这对于我的非活动图标来说不是问题,但对于宽度更大的活动图标来说却是问题。我尝试过将它们放入视图中,但似乎没有任何帮助。
我尝试将它们放入视图中并将宽度更改为完整,但似乎没有任何帮助。
import React from 'react';
import CardScreen from './authenticated/CardScreen';
import HomeScreen from './authenticated/HomeScreen';
import MoreScreen from './authenticated/MoreScreen';
import RewardsScreen from './authenticated/RewardsScreen';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { StyleSheet } from 'react-native';
import { Image, View } from 'react-native';
const Tab = createBottomTabNavigator();
const Authenticated = () => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? require('../../assets/home-icon-active.png')
: require('../../assets/home-icon-inactive.png');
} else if (route.name === 'Rewards') {
iconName = focused
? require('../../assets/rewards-icon-active.png')
: require('../../assets/rewards-icon-inactive.png');
} else if (route.name === 'Card') {
iconName = focused
? require('../../assets/card-icon-active.png')
: require('../../assets/card-icon-inactive.png');
} else if (route.name === 'More') {
iconName = focused
? require('../../assets/more-icon-active.png')
: require('../../assets/more-icon-inactive.png');
}
return (
<View style={styles.icon}>
<Image source={iconName} style={{ width: size, height: size }} />
</View>
);
},
tabBarLabelPosition: 'beside-icon',
tabBarStyle: {
backgroundColor: '#000000',
},
tabBarActiveTintColor: '#CBFF3D',
tabBarInactiveTintColor: '#FFFFFF',
tabBarShowLabel: false,
})}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Rewards" component={RewardsScreen} />
<Tab.Screen name="Card" component={CardScreen} />
<Tab.Screen name="More" component={MoreScreen} />
</Tab.Navigator>
);
};
const styles = StyleSheet.create({
icon: {
flex: 1,
width:100,
alignItems: 'center',
justifyContent: 'center',
},
});
export default Authenticated;
使用
Image
样式中默认大小以外的其他内容。下面的 width
设置为 50
,而 height
是默认值。
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, size }) => {
let iconName;
...
return (
<View style={styles.icon}>
<Image source={iconName} style={{ width: 50, height: size }} />
</View>
);
},
...
})}
>
...
</Tab.Navigator>