在 React 导航底部选项卡中使用自定义图标

Question

如何在 React 导航底部选项卡中使用图像作为图标？我的图像位于项目内的一个文件夹中，但首先我不确定是否可以使用该Import {anyComponent} from 'anyPath' 方法导入图像。另外，我不知道如何将这些自定义图像设置为图标。如果有人能帮助我，我将不胜感激。

多谢！

Answer 1

您可以使用如下所示的图像，基本上您可以向 tabbaricon 提供自定义组件，它可以是任何东西。

 <Tab.Screen
          name="Settings1"
          component={SettingsScreen}
          options={{
            title: 'My profile',
            tabBarIcon: ({size,focused,color}) => {
              return (
                <Image
                  style={{ width: size, height: size }}
                  source={{
                    uri:'image url',
                  }}
                />
              );
            },
          }}
        />