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

Question

我正在尝试添加图标到我的反应导航示例，我从reactnavigation.org找到：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将来自ios-options-outline的Ionicons。快速搜索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来解决这个问题，所以它不会发生在其他任何人身上！