有什么方法可以在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>
  );
};

每个 Tab 组件内部都有一个堆栈。

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

Answer 1

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

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

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

Answer 2

假设我理解你的问题，你想做的就是在选项卡更改时重新渲染图标？

React Navigation 有文档和基于选项卡的导航用例的示例这里。

在此处发布文档中的代码示例以方便访问：

import Ionicons from 'react-native-vector-icons/Ionicons';

// (...)

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

如果您的问题意味着在选项卡更改时重新渲染屏幕：

在更改选项卡时，将

useEffect

与

useIsFocused

结合使用应该可以发挥作用。您尚未将您的示例包含在这些挂钩中，所以我不太确定您如何使用它。

以下代码片段应该可以帮助您启动并运行上述挂钩。在这种情况下，您可以在切换选项卡时在

useEffect

内运行任何您想要的内容，其中活动选项卡将被触发。

如果出于某种原因您只是希望 UI 根据选项卡更改之间的某些数据进行更新/保留，您可能需要考虑使用 Redux。

import React, { useEffect } from "react";
import { Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { useIsFocused } from "@react-navigation/core";

function HomeScreen() {
  const isFocused = useIsFocused();

  useEffect(() => {
    if (isFocused) {
      console.log("HELLO HOME");
    }
  }, [isFocused]);

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  const isFocused = useIsFocused();

  useEffect(() => {
    if (isFocused) {
      console.log("HELLO SETTINGS");
    }
  }, [isFocused]);

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 3

除了 Baily 的回答之外，我还在返回中添加了 isFocused 。 就我而言，我有一个 webView，所以现在我有：

return (
isFocused && (
  <WebView>...</WebView>
));

如果没有逻辑“isFocused &&”，选项卡的内容不会重新渲染