React Navigation v3 - 选项卡图标 - 问号而不是图标

Question

我正在尝试将图标添加到我从 reactnavigation.org 找到的 react-navigation 示例： https://reactnavigation.org/docs/en/tab-based-navigation.html

即使这个实现似乎也不能正常工作，因为Settings 选项卡在未选中时会显示图标的问号。这是证明它的小吃： https://snack.expo.io/@react-navigation/stacks-in-tabs-v3

如何更改代码以使问号永远不会出现？

Answer 1

你做的一切都是对的！ :) 问题实际上与文档有关。当Settings 不在focus 中时您看到问号的原因是图标ios-options-outline 不存在！这是文档示例：

        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
          IconComponent = HomeIconWithBadge; 
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

当Settings 在focus 中时，iconName 将从Ionicons 变为ios-options-outline。对icon directory 的快速搜索显示虽然ios-options 存在，但ios-options-outline 不存在。

修复它所需要做的就是选择一个存在的图标，或者实际上根本不更改基于focus 的图标，因为tint 无论如何都会发出所选标签的信号。下面的代码应该按照你希望的方式工作。

        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
          IconComponent = HomeIconWithBadge; 
        } else if (routeName === 'Settings') {
          iconName = `ios-options`;
        }

我已经在文档中打开了pull request 来解决这个问题，这样它就不会发生在其他人身上！