Question

我在React Native设置中有一个bottomtab;

<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

您可以如下设置标签栏图标。还有一些用于聚焦的参数，您可以使用它们根据条件设置图像。

       <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==',
                  }}
                />
              );
            },
          }}
        />

在Tab.Screen导航中反应Native Custom图标/图像

1 个答案: