Question

我试图在我的react-navigation示例中添加图标，该示例是从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来在文档中修复此问题，因此其他任何人都不会发生！

React Navigation v3-标签图标-问号而不是图标

1 个答案: