Tab.Screen 导航中的 React Native 自定义图标/图像

Question

我的 React Native 设置中有一个底部选项卡；

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen name="News" component={News} />
    <Tab.Screen name="Mens" component={Mens} />
    <Tab.Screen name="Ladies" component={Ladies} />
    <Tab.Screen name="Watch" component={Fixtures} />
  </Tab.Navigator>
</NavigationContainer>

我想做的是在中间添加一个虚拟选项卡，这样我就可以添加自定义图标；

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen name="News" component={News} />
    <Tab.Screen name="Mens" component={Mens} />
    <Tab.Screen name="logo" />
    <Tab.Screen name="Ladies" component={Ladies} />
    <Tab.Screen name="Watch" component={Fixtures} />
  </Tab.Navigator>
</NavigationContainer>

我面临的挑战是从哪里开始（TabBarOptions 似乎无法在 tab.screen 中工作）。我发现了大量的解释（它们对于添加图标来说似乎有些过分），但它们都使用预定义的图标集。我想要做的是从自定义图像创建一个图标，然后将其用于徽标选项卡，以便它出现在我的底部导航中。

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:
                      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
                  }}
                />
              );
            },
          }}
        />