使用expo/vector图标时，react原生导航中的问号

Question

我刚开始使用react native，我创建了一个选项卡导航器，并使用expo-icons包@expo/vector icons。我的问题是，当应用程序第一次打开时，所有的选项卡图标都没有呈现出来，这会显示一个问号。单击tabBarIcon后，图标是否已渲染？下面是我的历史任务选项卡屏幕，我的其他选项卡屏幕也使用这种方式来呈现选项卡栏图标。

所以我不知道问题出在哪里。谢谢你回答我的问题。

历史任务选项卡屏幕

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

这是我点击标签按钮之前的图像

这是我点击标签按钮后的图像

Answer 1

您正在屏幕内的useLayoutEffect中设置图标。这将仅在渲染屏幕后运行。

默认情况下，底部选项卡导航器会延迟渲染屏幕，即在您至少访问一次屏幕之前不会渲染屏幕。因此，直到你真正打开屏幕，图标才会被设置。

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

https://reactnavigation.org/docs/tab-based-navigation/#customizing-外观