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

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将为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在文档中修复此问题，这样就不会发生在其他人身上!