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

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 将从 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 在文档中修复此问题，这样其他人就不会发生这种情况！

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

React Navigation v3 - Tabs Icon - question mark instead of Icon

reactjs

react-native

react-native-navigation

react-navigation