Expo SDK 31带有react-native-svg图标的react-navigation BottomTabNavigator不起作用

Question

我使用react-native-svg在整个应用中创建图标，包括用于标签导航器的图标。一切正常，直到我将Expo SDK 30更新到SDK 31（SDK 32中仍然存在相同问题）。

似乎最后一个选项卡的图标与其他选项卡重叠，从而阻止用户导航到除最后一个选项卡之外的任何选项卡。在每个图标的底部或顶部边缘上进行非常精确的点击会触发预期的导航行为，但是最后一个标签图标似乎覆盖了99％的标签区域。

导航器：

// imports

const AppNavigator = createStackNavigator(
  {
    AppTab: {
      screen: createBottomTabNavigator(
        {
          ScreenOne: {
            screen: ScreenOne,
            navigationOptions: {
              tabBarIcon: ({ tintColor }) => <ScreenOneIcon stroke={tintColor} fill={tintColor} />
            }
          },
          ScreenTwo: {
            screen: ScreenTwo,
            navigationOptions: {
              tabBarIcon: ({ tintColor }) => <ScreenTwoIcon stroke={tintColor} fill={tintColor} />
            }
          },
          ScreenThree: {
            screen: ScreenThree,
            navigationOptions: {
              tabBarIcon: ({ tintColor }) => <ScreenThreeIcon stroke={tintColor} fill={tintColor} />
            }
          },
        },
        {
          initialRouteName: 'ScreenOne',
          headerMode: 'none',
          tabBarOptions: {
            showLabel: false,
            activeTintColor: colors.blue,
            inactiveTintColor: colors.gray0,
            style: {backgroundColor: colors.gray2},
          }
        }
      )
    },
    // other navigators
  },
  {
    initialRouteName: 'AppTab',
    headerMode: 'none'
  }
)

export default createAppContainer(AppNavigator)

图标（均遵循相同的模式）：

import React from 'react'
import Svg,{G, Path} from 'react-native-svg'

export default class Icon extends React.Component {
  render() {
    return(
      <Svg viewBox='0 0 1000 1000' height='100%' width='100%'>
        <G fill={this.props.fill} stroke={this.props.stroke} strokeWidth={25}>
          <Path d="" />
          <Path d="" />
       </G>
     </Svg>
    )
  }
}