使用 expo/vector-icons 时反应本机导航中的问号

Question

这是我第一次使用 Whosebug，我是 React Native 的新手，我创建了一个选项卡导航器并使用了 expo 图标包 @expo/vector-icons。我的问题是，当应用程序第一次打开时，所有选项卡图标都没有呈现，这会显示一个问号。单击 tabBarIcon 后，图标呈现了吗？下面是我的历史任务tab screen，我的其他tab screen也是用这种方式渲染tab bar icon

所以我不知道是什么问题。感谢您回答我的问题。

历史任务选项卡屏幕

    useLayoutEffect(() => {
        navigation.setOptions({
            title: 'History Task',

            tabBarIcon: ({ focused }) => (
                <MaterialIcons name="history" size={focused ? 30 : 24} color={focused ? 'rgb(0,122,255)' : 'black'} />
            ),
        });
    }, [navigation]);

this is the image before i clicked the tab button

this is the image after i clicked the tab button

Answer 1

您正在屏幕内 useLayoutEffect 中设置图标。只有在屏幕渲染后才会运行。

默认情况下，底部选项卡导航器延迟呈现屏幕，即在您至少访问它们一次之前不会呈现屏幕。因此，在您实际打开屏幕之前，图标不会被设置。

没有理由在屏幕效果中设置图标。将其移动到屏幕上的 options 道具或导航器上的 screenOptions。 setOptions 仅当您想在组件和选项之间共享某些状态时才应使用。

https://reactnavigation.org/docs/tab-based-navigation/#customizing-the-appearance

使用 expo/vector-icons 时反应本机导航中的问号

Question mark in react native navigation while using expo/vector-icons

javascript

reactjs

react-native

react-navigation

expo