有没有什么方法可以在react-native中将屏幕重新渲染到底部选项卡导航v5

Question

嘿，当我回到其他选项卡时，第一次遇到重新渲染屏幕的问题时，我正在使用反应本机底部选项卡导航。我尝试在 useEffect() 中使用isFocused但它对我不起作用。

const LandScreen = ({navigation}) => {
  return (
    <Tab.Navigator
      
      tabBarOptions={{
        showLabel: false,
        activeTintColor: colors.primary,
        inactiveTintColor: colors.textHead,
      }}
      
      >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'home' : 'home';
            return <Icon name={icon} color={color} size={size} />;
          },
        }}
      />
      <Tab.Screen
        name="Message"
        component={ChatStackScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'chatbox-ellipses' : 'chatbox-ellipses';
            return <Icon name={icon} color={color} size={size} />;
          },
          
        }}
      />
      <Tab.Screen
        name="Requests"
        component={RequestStackScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'heart' : 'heart';
            return <Icon name={icon} color={color} size={size} />;
          },
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationStackScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'notifications' : 'notifications';
            return <Icon name={icon} color={color} size={size} />;
          },
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreenScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'person' : 'person';
            return <Icon name={icon} color={color} size={size} />;
          },
          
        }}
      />
    </Tab.Navigator>
  );
};

每个选项卡组件内部都有一个堆栈。

有人告诉我如何重新呈现底部导航选项卡？

Answer 1

如果我理解正确，您希望当您单击底部选项卡导航按钮时重新渲染屏幕。

这可以通过通过反应导航文档添加“焦点”事件监听器来完成https://reactnavigation.org/docs/function-after-focusing-screen/

或者在按下底部选项卡时显式调用“navigation.navigate”。