如何防止我的图标被切断？

Question

我试图将自定义 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;

Answer 1

使用

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>